页面直接引入 vue-router 定义路由+嵌套路由 新手入门

简单来说，路由实现起来需要四步，闲话不多说，直接上代码

 第一步  当然是先来组件了，（引入vue，vue-router就不多说了）         

var a = Vue.component('lee', {
    template: '#lee'
})
var b = Vue.component('lee1', {
    template: '#lee1'
})

var c = Vue.component('lee2', {
    template: '
c
'
})
var s = Vue.component('lee3', {
    template: '
s
'
})

   

第二步 配置routes

           

 var routes = [
    {
      path: '/',
      component: a
    },
    {
     path: '/lee1',
     component: b,
     children: [
       {   //此处配置为嵌套路由
        path: '',      //路由为/lee1是匹配到此处
        component: s
       },
       {
        path: 'c',    //路由为/lee1/c是匹配到此处
        component:c
       }
      ]
    }
]

  第三步  把设置好的routes放到 创建的VueRouter实例中            

var router = new VueRouter({
   routes   //es6语法  完整的为 routes：routes
}）

第四步  将VueRouter放到 vue实例中     

  new Vue({
   el: '#box',
   router    //es6语法  完整的为 router：router

})

上面的是js部分的代码 ，完整代码如下

  
  
  
  




  


   lee
   lee1