【原创】一篇学会vue路由配置 、 动态路由 、多层路由（实例）
先来看看效果图：
为了方便讲解，我没有使用vue脚手架，如果需要的，可以留言跟我要。不多说开工：
首先，html先组上
1 <div id="app"> 2 <div> 3 <router-link to="/index">首页</router-link> 4 <router-link to="/news">新闻</router-link> 5 <router-link to="/friend">朋友圈</router-link> 6 <router-view></router-view> 7 </div> 8 9 </div>
这个没什么要说的把，不懂html我也没招，router-link 页面路径 router-view vue展现视图
接下来就是vuejs的代码，我说下思路吧，针对新手思路：首先我们先写一级的路由，先不考虑二级的。写好了一层的再去考虑二层的，这是一层路由代码，这是注释都写全了就不一行行解释了。
1 // 注册新闻列表模块 2 Vue.component('newstpl',{ 3 template:'<div><h2>新闻页</h2></div>', 4 }); 5 // 注册朋友圈列表模块 6 Vue.component('firendlist',{ 7 template:'<div><h1><center>朋友圈</center></h1></div>', 8 }) 9 //首页内容 10 const indexhtml={ 11 template:"<div><h3>主页内容</h3></div>" 12 } 13 //新闻页面内容 14 const newhtml={ 15 template:'<newstpl></newstpl>' 16 } 17 //朋友圈页面内容 18 const firendhtml={ 19 template:'<firendlist></firendlist>', 20 } 21 //声明路由器 22 const routes=[ 23 {path:'/index',component:indexhtml, 24 }, 25 {path:'/news',component:newhtml, 26 }, 27 {path:'/friend',component:firendhtml}, 28 ] 29 //注册路由 30 const router = new VueRouter({ 31 routes 32 }) 33 //绑定 34 new Vue({ 35 el:'#app', 36 router, 37 38 })
好了，一层实现完毕，启动看看，好没问题，咱们往下走，下面我讲细一点吧 有点复杂。
咱们一共首页、朋友圈和新闻三个模块。一个个来
首页，相对简单。就是简单的二层路由
1 const indexhtml={ 2 template:"<div><h3>主页内容</h3><p><router-link to='/index/zhuce'>注册</router-link> <router-link to='/index/login'>登录</router-link></router-link></p><router-view></router-view></div>" 3 } 4 首先把indexhtml改成如上一般，增加注册和登录两个模块，既然增加了这俩模块，那肯定也要有魔板对吧， 5 //注册页面 6 const zhuce={ 7 template:'<div>我是注册页面</div>' 8 } 9 //登录页面 10 const login={ 11 template:'<div>我是登录页面</div>' 12 }
模版有了，那么就是写进路由了，路由怎么写呢？
1 {path:'/index/login',component:login},
这么写么？大家想一下，这么写可以么
首先，这么写相当于直接到了登录页面，却不显示index页面了，
再者，这样完全不利于代码的可读性，想象一下，另外的人去看你代码，那么多路由，谁知道对应哪里呢？不利于工作需要，
下面上正确的代码，
1 {path:'/index',component:indexhtml, 2 children:[ 3 {path:'zhuce',component:zhuce}, 4 {path:'login',component:login}, 5 ] 6 }
来说说吧，多层路由增加一个childred数组，简单吧，也可以继续嵌套，多层嵌套即可
想直接copy代码的可以看最后，可以分享所有代码。
这样简单的实现了首页的效果，再来说说新闻页面把，首先我考虑的是假如是一个后台系统，用户自定义的新闻路径，那么肯定不能是写死的地址，对吧，然后就是他的列表，肯定就要通过一个数组存储（本文中所有都是本地数据，需要服务器数据的可以留言我），在这他列表点击肯定要显示他的新闻内容，这个内容肯定不能写死地址，所以第一时间就想到了动态路由，也是本文的重点，下面开始吧（以下代码使用了watch监听，个人不推荐使用watch来制作页面，特别耗费资源，本文这么做是因为要讲解动态路由，但是不想全加载一个内容，并且当时写的时候有人问了我watch相关的，所以用了，好了不多说，说道用的时候再说替换方法）
首先我们要注册一个新闻列表的模块
1 // 注册新闻列表模块 2 Vue.component('newstpl',{ 3 template:'<div><h2>新闻页</h2><ul><li v-for="i in list"><router-link :to=" \'/news/\' + i.path">{{i.name}}</router-link></li></ul><router-view></router-view></div>', 4 data(){ 5 return { 6 list:[ 7 {name:'新闻一',path:'new1'}, 8 {name:'新闻二',path:'new2'}, 9 {name:'新闻三',path:'new3'} 10 ], 11 12 } 13 } 14 });
也需要注册一个内容页的模块
1 // 注册新闻内容模块 实现内容针对性 2 Vue.component('contenttpl',{ 3 props: { 4 data1: { 5 default: 'new4' 6 } 7 }, 8 template:`<div><h1>{{yemian[0].title}}</h1><h2>{{yemian[0].content}}</h2></div>`, 9 data(){ 10 return { 11 yemian:[{}], 12 newlist:[ 13 {title:'new1',content:'新闻一的内容'}, 14 {title:'new2',content:'新闻er的内容'}, 15 {title:'new3',content:'新闻san的内容'}, 16 ] 17 } 18 }, 19 watch:{ 20 data1(){ 21 this.myfunction() 22 23 } 24 }, 25 mounted(){ 26 this.myfunction() 27 }, 28 methods:{ 29 myfunction(){ 30 31 32 this.yemian = this.newlist.filter(item=>{ 33 return item.title==this.data1; 34 35 }) 36 }, 37 }, 38 });
这段比较长，说一下把，首先watch这个完全可以换成在列表加载出来之后去后台直接获取完整地址，再用完整地址来更新view，
在这说说我为什么需要一个myfunction这个函数，首先这也是watch和路由配合的一个缺点，用watch监听参数变化时候，怎么动态去更新内容呢，所以我增加了watch监听，但是发现模版第一次加载时候不生效，这是因为我第一次点击时候是传参，所以在魔板生成时候就已经有了这个，即便增加默认值也是不行的，所以增加了一个方法，开始就触发一遍，
filter是js语法，不懂得可以去查查，不多讲
接下来就是配置这个路由，
1 {path:'/news',component:newhtml, 2 children:[ 3 {path:'/news/:id',component:{ 4 template:'<contenttpl :data1="$route.params.id"></contenttpl>' 5 }} 6 ] 7 },
contenttpl这个上面注册了，上面提到我考虑后台数据，不确定的情况，所以需要传参更改内容（又是watch的锅），如果用我提到的另外一种方法可以避免这么麻烦，感兴趣的可以找我要。
$route.params.id 获取动态路由的值
不懂得可以看看route第二章
https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html
大约在第二屏
接下来就是朋友圈这个，这个上面的gif就看出来了，把第二个看完，第三个就是留给你自己练习的，看完本文的朋友去练习把，下面分享本页面的全部代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>vueroter 学习</title> 9 </head> 10 <body> 11 <div id="app"> 12 <div> 13 <router-link to="/index">首页</router-link> 14 <router-link to="/news">新闻</router-link> 15 <router-link to="/friend">朋友圈</router-link> 16 <router-view></router-view> 17 </div> 18 19 </div> 20 21 <script src="https://unpkg.com/vue/dist/vue.js"></script> 22 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 23 <script> 24 // 注册新闻列表模块 25 Vue.component('newstpl',{ 26 template:'<div><h2>新闻页</h2><ul><li v-for="i in list"><router-link :to=" \'/news/\' + i.path">{{i.name}}</router-link></li></ul><router-view></router-view></div>', 27 data(){ 28 return { 29 list:[ 30 {name:'新闻一',path:'new1'}, 31 {name:'新闻二',path:'new2'}, 32 {name:'新闻三',path:'new3'} 33 ], 34 35 } 36 } 37 }); 38 // 注册新闻内容模块 实现内容针对性 39 Vue.component('contenttpl',{ 40 props: { 41 data1: { 42 default: 'new4' 43 } 44 }, 45 template:`<div><h1>{{yemian[0].title}}</h1><h2>{{yemian[0].content}}</h2></div>`, 46 data(){ 47 return { 48 yemian:[{}], 49 newlist:[ 50 {title:'new1',content:'新闻一的内容'}, 51 {title:'new2',content:'新闻er的内容'}, 52 {title:'new3',content:'新闻san的内容'}, 53 ] 54 } 55 }, 56 watch:{ 57 data1(){ 58 this.myfunction() 59 60 } 61 }, 62 mounted(){ 63 this.myfunction() 64 }, 65 methods:{ 66 myfunction(){ 67 68 69 this.yemian = this.newlist.filter(item=>{ 70 return item.title==this.data1; 71 72 }) 73 }, 74 75 }, 76 77 78 }); 79 // 注册朋友圈列表模块 80 Vue.component('firendlist',{ 81 template:'<div><h1><center>朋友圈</center></h1><ul><li v-for="t in firendlist">{{t.name}}</li></ul></div>', 82 data(){ 83 return { 84 firendlist:[ 85 {name:'1'}, 86 {name:'2'}, 87 {name:'3'}, 88 {name:'4'}, 89 {name:'5'}, 90 {name:'6'}, 91 {name:'7'}, 92 {name:'8'}, 93 {name:'9'}, 94 {name:'10'}, 95 {name:'11'}, 96 {name:'12'}, 97 ] 98 } 99 } 100 }) 101 //首页内容 102 const indexhtml={ 103 template:"<div><h3>主页内容</h3><p><router-link to='/index/zhuce'>注册</router-link> <router-link to='/index/login'>登录</router-link></router-link></p><router-view></router-view></div>" 104 105 } 106 //新闻页面内容 107 const newhtml={ 108 template:'<newstpl></newstpl>' 109 110 } 111 //朋友圈页面内容 112 const firendhtml={ 113 template:'<firendlist></firendlist>', 114 115 116 } 117 //注册页面 118 const zhuce={ 119 template:'<div>我是注册页面</div>' 120 } 121 //登录页面 122 const login={ 123 template:'<div>我是登录页面</div>' 124 } 125 126 //声明路由器 127 const routes=[ 128 {path:'/index',component:indexhtml, 129 children:[ 130 {path:'zhuce',component:zhuce}, 131 {path:'login',component:login}, 132 ] 133 }, 134 {path:'/news',component:newhtml, 135 children:[ 136 {path:'/news/:id',component:{ 137 template:'<contenttpl :data1="$route.params.id"></contenttpl>' 138 }} 139 ] 140 }, 141 {path:'/friend',component:firendhtml}, 142 143 144 ] 145 //注册路由 146 const router = new VueRouter({ 147 routes 148 }) 149 //绑定 150 new Vue({ 151 el:'#app', 152 router, 153 154 }) 155 </script> 156 </body> 157 </html>
以上是本文全部代码，不喜勿喷，本文分享结束。转载需要注明原处
