【原創】一篇學會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>

 

以上是本文所有代碼，不喜勿噴，本文分享結束。轉載須要註明原處