vue+Element左树导航右内容区页面跳转

首先在项目中添加Element UI

npm i element-ui -S

修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

HelloWorld.vue

Demo.vue目标页面代码

router/index.js路由代码为

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import HelloWorld from '@/components/HelloWorld'
 4 import Demo from '../components/Demo'
 5 import Demo3 from '../components/Demo3'
 6 
 7 Vue.use(Router)
 8 
 9 export default new Router({
10   // 为了去掉吗默认情况下路由中出现的#号
11   mode: 'history',
12   routes: [
13     {
14       path: '/',
15       name: 'HelloWorld',
16       component: HelloWorld,
17       children: [
18         {
19           path: '/demo',
20           name: 'Demo',
21           component: Demo
22         },
23         {
24           path: '/demo3',
25           name: 'Demo3',
26           component: Demo3
27         }
28       ]
29     }
30   ]
31 })

 

转载于:https://www.cnblogs.com/Jayeblog/p/11540033.html