vue多层嵌套路由实例分析

效果图:

　　

/细节/:id/年龄/:年龄
　　{{$路线。params | json}},,,→,当前参数
　　{{$ route.path}},,,→,当前路径
　　{{$路线。查询| json}},,,→,数据

　　 　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> Document 　　& lt;脚本src=" https://www.yisu.com/zixun/bower_components/vue/dist/vue.js "祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/zixun/bower_components/vue-router/dist/vue-router.js "祝辞& lt;/script> 　　& lt; style> 　　.v-link-active { 　　字体大小:20 px; 　　颜色:#法郎; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=昂凶印北? 　　& lt; ul> 　　& lt; li> 　　& lt; v-link="{路径:“/home”}”在主页& lt;/a> 　　& lt;/li> 　　& lt; li> 　　& lt; v-link="{路径:/新闻的}”在新闻& lt;/a> 　　& lt;/li> 　　& lt;/ul> 　　& lt; div> 　　& lt; router-view> & lt;/router-view> 　　& lt;/div> 　　& lt;/div> 　　& lt;模板id=凹摇痹? 　　& lt; h4>我是主页& lt;/h4> 　　& lt; div> 　　& lt; v-link="{路径:/home/登录/硫化锌的}”在登录& lt;/a> 　　& lt; v-link="{路径:/home/注册/努力“}”在注册& lt;/a> 　　& lt;/div> 　　& lt; div> 　　& lt; router-view> & lt;/router-view> 　　& lt;/div> 　　& lt;/template> 　　& lt;模板id=靶挛拧痹? 　　& lt; h4>我是新闻& lt;/h4> 　　& lt; div> 　　& lt; v-link="{路径:/新闻/细节/001“}”在新闻001 & lt;/a> 　　& lt; v-link="{路径:/新闻/细节/002“}”在新闻002 & lt;/a> 　　& lt;/div> 　　& lt; router-view> & lt;/router-view> 　　& lt;/template> 　　& lt;模板id=跋附凇北? 　　{{$路线。params | json}} 　　& lt; br> 　　{{$ route.path}} 　　& lt; br> 　　{{$路线。查询| json}} 　　& lt;/template> 　　& lt; script>//1。准备一个根组件 　　应用var=Vue.extend ();//2。国内消息组件都准备 　　var=Vue.extend回家({ 　　模板:“#回家” 　　}); 　　var=Vue.extend新闻({ 　　模板:“#新闻” 　　}); 　　var=Vue.extend({细节 　　模板:“#细节” 　　});//3。准备路由 　　var路由器=new VueRouter ();//4。关联 　　router.map ({ 　　“家”:{ 　　组件:回家, 　　subRoutes: { 　　“登录/:名称”:{ 　　组件:{ 　　模板:“& lt; strong>我是登录信息{{$路线。params | json}} & lt;/strong>” 　　} 　　}, 　　“注册”:{ 　　组件:{ 　　模板:“& lt; strong>我是注册信息& lt;/strong>” 　　} 　　} 　　} 　　}, 　　“新闻”:{ 　　组件:新闻, 　　subRoutes: {//细节:id: { 　　组件:细节 　　} 　　} 　　} 　　});//5。启动路由 　　router.start(应用,“#箱”);//6。跳转 　　router.redirect ({ 　　‘/?‘回家’ 　　}); 　　& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　 　　

vue多层嵌套路由实例分析