vue路由----路由表的组建群

1.在idea中新建vue项目

2.main.js中修改

import Vue from 'vue'
// import Router from './Router'     /*引用自同级Router.js*/
// import Router from './SonRouter'     /*引用自同级SonRouter.js*/
import Router from './ComponentRouter'     /*引用自同级ComponentRouter.js*/

3.src下新建文件ComponentRouter.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//声明模版，点击链接显示对应的内容
const first = { template:'
first内容
'}
const second = { template:'
second内容
'}
const Home = { template:'
Home内容
'}
const HelloWorld = { template:'
{{$route.params.name}}
'}

//router自己定义名字
const router = new VueRouter({
  mode:'history',
  base:__dirname, //当前的路径   dirname在node中指当前的本地路径
  routes:[       //以数组的方式给出  [{},{}],多个的话一定是routes复数形式
    {path:'/',name:'Home', components:{
          default:Home,
          left:first,
          right:second
      }},
    {path:'/first',name:'Home-First',components:{
        default:HelloWorld,
        left:first,
        right:second
      }}
  ]
})

new Vue({
  router,
  template:`
    

        
导航
        
{{$route.name}}
         

            
/
            
/first
          
          
          
          
    
    `
}).$mount('#app')

运行结果：