这篇文章主要给大家介绍了vue 2.0路由之路由嵌套的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
前言
vue一个重要的方面就是路由，下面是自己写的一个路由的例子分享给大家供大家参考学习，下面来看看详细的介绍。
方法如下：
1、引入依赖库就不必再说
2、创建组件
两种写法
第一种：间接
<div> <h1>Home</h1><p>{{msg}}</p></div>
var About = Vue.extend({ template: '#about' });
第二种：直接
var Out = Vue.extend({ template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>' });
3、创建 router 实例，传 ‘routes’路由映射配置
var router = new VueRouter({ routes: [ { path: '/路径', component: 组件名 }, { path: '/', component: 组件名}, //设置默认路径 { path: "*", component:Home }//路径不存在 <br> ] });
4、创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
var vm = new Vue({ router: router }).$mount('#app');
整体的demo
<title>hello world</title> <div id="app"> <div> <!-- 4、默<p>本文来源gao!%daima.com搞$代*!码9网(</p>认会被渲染成一个 `` 标签 ,to指令跳转到指定路径 -->Go to HomeGo to AboutGo to Out</div><!-- 5、在页面上使用标签，用于渲染匹配的组件 --><!--这里显示的是展示的界面--></div> <div> <h1>Home</h1><p>{{msg}}</p></div> <div> <h1>about</h1><p>This is the tutorial about vue-router.</p></div><!-- 0、引入依赖库 -->
关于路由嵌套
在配置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上，另外还总结了一些自己最近在学习的阿里云上传图片等，会逐步更新，敬请指教！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对gaodaima搞代码网的支持。
以上就是vue 2.0路由之路由嵌套示例详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue 2.0路由之路由嵌套示例详解
转载请注明原文链接：vue 2.0路由之路由嵌套示例详解
