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

这篇文章主要给大家介绍了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

   hello world   Go to HomeGo to AboutGo 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上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！

总结

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

以上就是vue 2.0路由之路由嵌套示例详解的详细内容，更多请关注0133技术站其它相关文章！