vue 2.0路由之路由嵌套示例详解

前言

vue一个重要的方面就是路由，下面是自己写的一个路由的例子分享给大家供大家参考学习，下面来看看详细的介绍。

方法如下：

1、引入依赖库就不必再说

2、创建组件

两种写法

第一种：间接

 var about = Vue.extend({

   template: '#about'

  });

第二种：直接

  var Out = Vue.extend({

   template: 'Out
This is the tutorial out vue-router.
'

  }); 

3、创建 router 实例，传 'routes'路由映射配置

var router = new VueRouter({

   routes: [

   { path: '/路径', component: 组件名 },

    { path: '/', component: 组件名}, //设置默认路径

　　　　　{ path: "*", component:Home }//路径不存在   
　　　　] 

 }); 

4、创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

var vm = new Vue({

    router: router 

 }).$mount('#app'); 

整体的demo

 

 





 

  

   

   Go to Home

   Go to about

   Go to Out

  

 

  

  

     

 

  

 

 

  

   

 

 

 



 



 

关于路由嵌套

在配置routes映射时添加children配置

如下：

var router = new VueRouter({

 routes:[

  {path:'/home',component:Home,

   children:[//子路由

    {path:'news',component:News},

    {path:'change',component:change}    

  ]},

  {path:'/me',component:Me},

  {path:'/',component:Me}

  ]

 　　}) 

关于具体的demo可以参考GitHub上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对考高分网的支持。