一. 簡介
1.路由的概念
路由的本質就是一種對應關系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應的資源。那么url地址和真實的資源之間就有一種對應的關系，就是路由。
路由分為前端路由和后端路由:
(1).后端路由是由服務器端進行實現，並完成資源的分發。
(2).前端路由是依靠hash值(錨鏈接)的變化進行實現。
前端路由的基本概念：根據不同的事件來顯示不同的頁面內容，即事件與事件處理函數之間的對應關系前端路由主要做的事情就是監聽事件並分發執行事件處理函數。
案例：這里自己模擬一下路由的概念，進行tab的切換。
核心代碼：
1 <div> 2 <!-- 切換組件的超鏈接 --> 3 <a href="#/zhuye">主頁</a> 4 <a href="#/keji">科技</a> 5 <a href="#/caijing">財經</a> 6 <a href="#/yule">娛樂</a> 7 <!-- 根據 :is 屬性指定的組件名稱，把對應的組件渲染到 component 標簽所在的位置 --> 8 <!-- 可以把 component 標簽當做是【組件的占位符】 --> 9 <component :is="comName"></component> 10 </div> 11 // 監聽 window 的 onhashchange 事件，根據獲取到的最新的 hash 值，切換要顯示的組件的名稱 12 window.onhashchange = function() { 13 // 通過 location.hash 獲取到最新的 hash 值 14 console.log(location.hash); 15 switch (location.hash.slice(1)) { 16 case '/zhuye': 17 vm.comName = 'zhuye' 18 break 19 case '/keji': 20 vm.comName = 'keji' 21 break 22 case '/caijing': 23 vm.comName = 'caijing' 24 break 25 case '/yule': 26 vm.comName = 'yule' 27 break 28 } 29 }
2. Vue-Router
它是一個Vue.js官方提供的路由管理器。是一個功能更加強大的前端路由器，推薦使用。Vue Router和Vue.js非常契合，可以一起方便的實現SPA(單頁應用程序)應用程序的開發。
(1).Vue Router依賴於Vue，所以需要先引入Vue，再引入Vue Router
(2).Vue Router的特性：支持H5歷史模式或者hash模式、支持嵌套路由、支持路由參數、支持編程式路由、支持命名路由、支持路由導航守衛、支持路由過渡動畫特效、支持路由懶加載、支持路由滾動行為。
二. Vue-Router用法
1. 基本用法
A.導入js文件
B.添加路由鏈接:<router-link>是路由中提供的標簽，默認會被渲染為a標簽，to屬性默認被渲染為href屬性，to屬性的值會被渲染為#開頭的hash地址
C.添加路由占位符(最后路由展示的組件就會在占位符的位置顯示)
D.定義路由組件,配置路由規則並創建路由實例 （路由規則中path中的值要和組件router-link中to的值相同）
E.將路由掛載到Vue實例中
2. 重定向
path設置為/表示頁面最初始的地址 / ,redirect表示要被重定向的新地址，設置為一個路由即可.
以上核心代碼分享：（本節底部有該篇章的完整版代碼）
1 <div id="myApp"> 3 <p>2.路由基本用法</p> 4 <div> 5 <router-link to="/user">User</router-link> 6 <router-link to="/register">Register</router-link> 7 <!-- 路由占位符 --> 8 <router-view></router-view> 9 </div> 11 </div>
1 var router = new VueRouter({ 2 //所有的路由規則 3 routes: [{ 4 path: '/', 5 redirect: '/user', 6 }, //初始頁面，重定向 7 { 8 path: '/user', 9 component: { 10 template: '<h1>User組件</h1>' 11 } 12 }, 13 { 14 path: '/register', 15 component: { 16 template: '<h1>Register組件</h1>' 17 } 18 } 19 ] 20 });
3. 路由嵌套
在VueRouter中的routes屬性中添加 children屬性，在里面添加子路由屬性.
核心代碼分享：（本節底部有該篇章的完整版代碼）
1 <p>3.嵌套路由</p> 2 <div> 3 <router-link to="/user">User</router-link> 4 <router-link to="/register">Register</router-link> 5 <!-- 路由占位符 --> 6 <router-view></router-view> 7 </div> 8 9 var User = { 10 template: '<h1>User組件</>' 11 }; 12 var Register = { 13 template: ` 14 <div> 15 <h1>Register組件</h1> 16 <router-link to="/register/tab1">tab1</router-link> 17 <router-link to="/register/tab2">tab2</router-link> 18 <router-view></router-view> 19 </div>` 20 }; 21 var Tab1 = { 22 template: '<h1>tab1組件</>' 23 }; 24 var Tab2 = { 25 template: '<h1>tab2組件</>' 26 }; 27 var router = new VueRouter({ 28 //所有的路由規則 29 routes: [{ 30 path: '/', 31 redirect: '/user', //初始頁面，重定向 32 }, 33 { 34 path: '/user', 35 component: User 36 }, 37 //子路由規則 38 { 39 path: '/register', 40 component: Register, 41 children:[{ 42 path:'/register/tab1', 43 component:Tab1 44 }, 45 { 46 path:'/register/tab2', 47 component:Tab2 48 }] 49 } 50 ] 51 });
4. 動態匹配
(1).定義:動態路由就是可以接收參數數據的路由形式，路由地址的一部分是會發生變化的
(2).動態路由傳參的幾種方式
A. 在路由規則中，通過/:參數名 的形式傳遞參數, 然后再模板中通過 $route.params.參數名 來獲取
B. 通過props來接收參數，在對應模板上通過通過props聲明參數來接受，同時在路由規則中將對應的props設置為true，這樣就可以直接使用props中的參數來獲取傳遞值了。當然，也可以和 $route.params.參數名 這種方式混用。
C. 通過路由規則向模板中傳參，在路由規則中通過props聲明對象來向模板中傳遞參數，但是使用了這種模式，上面B的模式，即直接使用參數，則不能獲取了，但仍然額可以通過$route.params.參數名 這種方式調用。
D. 想要獲取傳遞的參數值還想要獲取傳遞的對象數據，那么props應該設置為函數形式。
eg: props:(route)=>({id:route.params.id, name:route.params.name,age:'100'})
核心代碼分享：（本節底部有該篇章的完整版代碼）
1 <p>4.動態路由</p> 2 <div> 3 <router-link to="/user/1">User1</router-link> 4 <router-link to="/user/2/ypf">User2</router-link> 5 <router-link to="/user/3">User3</router-link> 6 <router-link to="/register">Register</router-link> 7 <!-- 路由占位符 --> 8 <router-view></router-view> 9 </div> 10 //4.動態路由 11 //4.1 方式1 12 var User = { 13 template: '<h1>User組件，傳遞過來的id為：{{$route.params.id}},傳遞過來的name為：{{$route.params.name}}</h1>' 14 }; 15 var Register = { 16 template: '<h1>register組件</>' 17 }; 18 var router=new VueRouter({ 19 routes:[ 20 {path:'/',redirect:'/user/1'}, 21 {path:'/user/:id',component:User}, 22 {path:'/user/:id/:name',component:User}, 23 {path:'/register',component:Register} 24 ] 25 }); 26 27 //4.2 方式2 28 var User = { 29 props:['id','name'], 30 template: '<h1>User組件，傳遞過來的id為：{{id}} 或{{$route.params.id}},傳遞過來的name為：{{name}}</h1>' 31 }; 32 var Register = { 33 template: '<h1>register組件</>' 34 }; 35 var router=new VueRouter({ 36 routes:[ 37 {path:'/',redirect:'/user/1'}, 38 {path:'/user/:id',component:User,props:true}, 39 {path:'/user/:id/:name',component:User,props:true}, 40 {path:'/register',component:Register} 41 ] 42 }); 43 44 //4.3 方式3 45 var User = { 46 props:['id','name','age'], 47 template: '<h4>User組件，傳遞過來的id為：{{id}} 或{{$route.params.id}},傳遞過來的name為：{{name}},傳遞過來的age的：{{age}}</h4>' 48 }; 49 var Register = { 50 template: '<h4>register組件</h4>' 51 }; 52 var router=new VueRouter({ 53 routes:[ 54 {path:'/',redirect:'/user/1'}, 55 {path:'/user/:id',component:User,props:true}, 56 {path:'/user/:id/:name',component:User,props:{age:'100'}}, 57 {path:'/register',component:Register} 58 ] 59 }); 60 61 //4.4 方式4 62 var User = { 63 props:['id','name','age'], 64 template: '<h4>User組件，傳遞過來的id為：{{id}} 或{{$route.params.id}},傳遞過來的name為：{{name}},傳遞過來的age的：{{age}}</h4>' 65 }; 66 var Register = { 67 template: '<h4>register組件</h4>' 68 }; 69 var router=new VueRouter({ 70 routes:[ 71 {path:'/',redirect:'/user/1'}, 72 {path:'/user/:id', name: 'myuser', component:User,props:(route)=>({id:route.params.id, name:'ypf',age:'100'})}, 73 {path:'/register',component:Register} 74 ] 75 }); 76
5. 命名路由
通過name屬性給路由規則添加個別名，例： name: 'myuser'，然后在路由使用中，直接通過：to屬性傳遞name即可，參數通過params傳遞。
核心代碼分享：（本節底部有該篇章的完整版代碼）
1 <div> 2 <router-link to="/user/1">User1</router-link> 3 <router-link :to="{ name: 'myuser', params: {id: 2} }">User2</router-link> 4 <router-link to="/user/3">User3</router-link> 5 <router-link to="/register">Register</router-link> 6 <!-- 路由占位符 --> 7 <router-view></router-view> 8 <button @click="goRegister">進入Register</button> 9 </div>
6. 編程式導航
A.聲明式導航：通過點擊鏈接的方式實現的導航
B.編程式導航：調用js的api方法實現導航
Vue-Router中常見的導航方式：
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.go( n );//n為數字，參考history.go
this.$router.go( -1 );
代碼分享：
本章節完整代碼分享：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>路由相關</title> 6 <style type="text/css"> 7 p { 8 font-size: 18px; 9 color: blue; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="myApp"> 15 <p>1.自己模擬一個前端路由</p> 16 <div> 17 <!-- 切換組件的超鏈接 --> 18 <a href="#/zhuye">主頁</a> 19 <a href="#/keji">科技</a> 20 <a href="#/caijing">財經</a> 21 <a href="#/yule">娛樂</a> 22 <!-- 根據 :is 屬性指定的組件名稱，把對應的組件渲染到 component 標簽所在的位置 --> 23 <!-- 可以把 component 標簽當做是【組件的占位符】 --> 24 <component :is="comName"></component> 25 </div> 26 <p>2.路由基本用法</p> 27 <div> 28 <router-link to="/user">User</router-link> 29 <router-link to="/register">Register</router-link> 30 <!-- 路由占位符 --> 31 <router-view></router-view> 32 </div> 33 <p>3.嵌套路由</p> 34 <div> 35 <router-link to="/user">User</router-link> 36 <router-link to="/register">Register</router-link> 37 <!-- 路由占位符 --> 38 <router-view></router-view> 39 </div> 40 <p>4.動態路由</p> 41 <div> 42 <router-link to="/user/1">User1</router-link> 43 <router-link to="/user/2/ypf">User2</router-link> 44 <router-link to="/user/3">User3</router-link> 45 <router-link to="/register">Register</router-link> 46 <!-- 路由占位符 --> 47 <router-view></router-view> 48 </div> 49 <p>5.命名路由</p> 50 <div> 51 <router-link to="/user/1">User1</router-link> 52 <router-link :to="{ name: 'myuser', params: {id: 2} }">User2</router-link> 53 <router-link to="/user/3">User3</router-link> 54 <router-link to="/register">Register</router-link> 55 <!-- 路由占位符 --> 56 <router-view></router-view> 57 <button @click="goRegister">進入Register</button> 58 </div> 59 </div> 60 <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> 61 <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script> 62 <script type="text/javascript"> 63 //基本使用、重定向 (需要注釋掉其它的規則) 64 // var router = new VueRouter({ 65 // //所有的路由規則 66 // routes: [{ 67 // path: '/', 68 // redirect: '/user', 69 // }, //初始頁面，重定向 70 // { 71 // path: '/user', 72 // component: { 73 // template: '<h1>User組件</h1>' 74 // } 75 // }, 76 // { 77 // path: '/register', 78 // component: { 79 // template: '<h1>Register組件</h1>' 80 // } 81 // } 82 // ] 83 // }); 84 85 //嵌套路由(需要注釋掉其它的規則) 86 var User = { 87 template: '<h1>User組件</>' 88 }; 89 var Register = { 90 template: ` 91 <div> 92 <h1>Register組件</h1> 93 <router-link to="/register/tab1">tab1</router-link> 94 <router-link to="/register/tab2">tab2</router-link> 95 <router-view></router-view> 96 </div>` 97 }; 98 var Tab1 = { 99 template: '<h1>tab1組件</>' 100 }; 101 var Tab2 = { 102 template: '<h1>tab2組件</>' 103 }; 104 var router = new VueRouter({ 105 //所有的路由規則 106 routes: [{ 107 path: '/', 108 redirect: '/user', //初始頁面，重定向 109 }, 110 { 111 path: '/user', 112 component: User 113 }, 114 //子路由規則 115 { 116 path: '/register', 117 component: Register, 118 children:[{ 119 path:'/register/tab1', 120 component:Tab1 121 }, 122 { 123 path:'/register/tab2', 124 component:Tab2 125 }] 126 } 127 ] 128 }); 129 130 //4.動態路由 131 //4.1 方式1 132 // var User = { 133 // template: '<h1>User組件，傳遞過來的id為：{{$route.params.id}},傳遞過來的name為：{{$route.params.name}}</h1>' 134 // }; 135 // var Register = { 136 // template: '<h1>register組件</>' 137 // }; 138 // var router=new VueRouter({ 139 // routes:[ 140 // {path:'/',redirect:'/user/1'}, 141 // {path:'/user/:id',component:User}, 142 // {path:'/user/:id/:name',component:User}, 143 // {path:'/register',component:Register} 144 // ] 145 // }); 146 147 //4.2 方式2 148 // var User = { 149 // props:['id','name'], 150 // template: '<h1>User組件，傳遞過來的id為：{{id}} 或{{$route.params.id}},傳遞過來的name為：{{name}}</h1>' 151 // }; 152 // var Register = { 153 // template: '<h1>register組件</>' 154 // }; 155 // var router=new VueRouter({ 156 // routes:[ 157 // {path:'/',redirect:'/user/1'}, 158 // {path:'/user/:id',component:User,props:true}, 159 // {path:'/user/:id/:name',component:User,props:true}, 160 // {path:'/register',component:Register} 161 // ] 162 // }); 163 164 //4.3 方式3 165 // var User = { 166 // props:['id','name','age'], 167 // template: '<h4>User組件，傳遞過來的id為：{{id}} 或{{$route.params.id}},傳遞過來的name為：{{name}},傳遞過來的age的：{{age}}</h4>' 168 // }; 169 // var Register = { 170 // template: '<h4>register組件</h4>' 171 // }; 172 // var router=new VueRouter({ 173 // routes:[ 174 // {path:'/',redirect:'/user/1'}, 175 // {path:'/user/:id',component:User,props:true}, 176 // {path:'/user/:id/:name',component:User,props:{age:'100'}}, 177 // {path:'/register',component:Register} 178 // ] 179 // }); 180 181 //4.4 方式4 182 var User = { 183 props:['id','name','age'], 184 template: '<h4>User組件，傳遞過來的id為：{{id}} 或{{$route.params.id}},傳遞過來的name為：{{name}},傳遞過來的age的：{{age}}</h4>' 185 }; 186 var Register = { 187 template: '<h4>register組件</h4>' 188 }; 189 var router=new VueRouter({ 190 routes:[ 191 {path:'/',redirect:'/user/1'}, 192 {path:'/user/:id', name: 'myuser', component:User,props:(route)=>({id:route.params.id, name:'ypf',age:'100'})}, 193 {path:'/register',component:Register} 194 ] 195 }); 196 197 198 199 var vm = new Vue({ 200 el: '#myApp', 201 data: { 202 comName: 'zhuye' 203 }, 204 methods: { 205 goRegister:function(){ 206 this.$router.push('/register') 207 } 208 }, 209 components: { 210 'zhuye': { 211 template: "<h1>主頁信息</h1>" 212 }, 213 'keji': { 214 template: "<h1>科技信息</h1>" 215 }, 216 'caijing': { 217 template: "<h1>財經信息</h1>" 218 }, 219 'yule': { 220 template: "<h1>娛樂信息</h1>" 221 } 222 }, 223 router: router, 224 mounted: function() { 225 //自己模擬路由 （暫時注釋） 226 // 監聽 window 的 onhashchange 事件，根據獲取到的最新的 hash 值，切換要顯示的組件的名稱 227 window.onhashchange = function() { 228 // 通過 location.hash 獲取到最新的 hash 值 229 console.log(location.hash); 230 switch (location.hash.slice(1)) { 231 case '/zhuye': 232 vm.comName = 'zhuye' 233 break 234 case '/keji': 235 vm.comName = 'keji' 236 break 237 case '/caijing': 238 vm.comName = 'caijing' 239 break 240 case '/yule': 241 vm.comName = 'yule' 242 break 243 } 244 } 245 } 246 247 }) 248 </script> 249 </body> 250 </html>
三. 后台系統路由案例
1. 實現功能
利用模板和路由配合，點擊左側列表，右側顯示對應的內容，點擊用戶表格中的詳情，進入到對應的詳情頁面，然后點擊返回，可以返回回去。
2. 代碼分享
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>路由案例</title> 6 <style type="text/css"> 7 html, 8 body, 9 #app { 10 margin: 0; 11 padding: 0px; 12 height: 100%; 13 } 14 15 .header { 16 height: 50px; 17 background-color: #545c64; 18 line-height: 50px; 19 text-align: center; 20 font-size: 24px; 21 color: #fff; 22 } 23 24 .footer { 25 height: 40px; 26 line-height: 40px; 27 background-color: #888; 28 position: absolute; 29 bottom: 0; 30 width: 100%; 31 text-align: center; 32 color: #fff; 33 } 34 35 .main { 36 display: flex; 37 position: absolute; 38 top: 50px; 39 bottom: 40px; 40 width: 100%; 41 } 42 43 .content { 44 flex: 1; 45 text-align: center; 46 height: 100%; 47 } 48 49 .left { 50 flex: 0 0 20%; 51 background-color: #545c64; 52 } 53 54 .left a { 55 color: white; 56 text-decoration: none; 57 } 58 59 .right { 60 margin: 5px; 61 } 62 63 .btns { 64 width: 100%; 65 height: 35px; 66 line-height: 35px; 67 background-color: #f5f5f5; 68 text-align: left; 69 padding-left: 10px; 70 box-sizing: border-box; 71 } 72 73 button { 74 height: 30px; 75 background-color: #ecf5ff; 76 border: 1px solid lightskyblue; 77 font-size: 12px; 78 padding: 0 20px; 79 } 80 81 .main-content { 82 margin-top: 10px; 83 } 84 85 ul { 86 margin: 0; 87 padding: 0; 88 list-style: none; 89 } 90 91 ul li { 92 height: 45px; 93 line-height: 45px; 94 background-color: #a0a0a0; 95 color: #fff; 96 cursor: pointer; 97 border-bottom: 1px solid #fff; 98 } 99 100 table { 101 width: 100%; 102 border-collapse: collapse; 103 } 104 105 td, 106 th { 107 border: 1px solid #eee; 108 line-height: 35px; 109 font-size: 12px; 110 } 111 112 th { 113 background-color: #ddd; 114 } 115 </style> 116 </head> 117 <body> 118 <div id="myApp"> 119 <!-- 路由占位符 --> 120 <router-view></router-view> 121 </div> 122 123 <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> 124 <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script> 125 <script type="text/javascript"> 126 //一.定義各種模板組件（以下全是局部組件） 127 //1. 根組件 128 var App = { 129 template: `<div> 130 <header class="header">后台管理系統</header> 131 <div class="main"> 132 <div class="content left"> 133 <ul> 134 <li><router-link to="/users">用戶管理</router-link></li> 135 <li><router-link to="/rights">權限管理</router-link></li> 136 <li><router-link to="/goods">商品管理</router-link></li> 137 <li><router-link to="/orders">訂單管理</router-link></li> 138 <li><router-link to="/settings">系統設置</router-link></li> 139 </ul> 140 </div> 141 <div class="content right"><div class="main-content"> 142 <router-view /> 143 </div></div> 144 </div> 145 <footer class="footer">版權信息</footer> 146 </div>` 147 }; 148 //2.用戶組件 149 var Users={ 150 data:function(){ 151 return { 152 userlist: [ 153 { id: 1, name: '張三', age: 10 }, 154 { id: 2, name: '李四', age: 20 }, 155 { id: 3, name: '王五', age: 30 }, 156 { id: 4, name: '趙六', age: 40 } 157 ] 158 } 159 }, 160 methods:{ 161 goDetail:function(id){ 162 console.log(id); 163 this.$router.push('/userinfo/'+id); 164 } 165 }, 166 template:` 167 <div> 168 <h3>用戶管理區域</h3> 169 <table> 170 <thead> 171 <tr><th>編號</th><th>姓名</th><th>年齡</th><th>操作</th></tr> 172 </thead> 173 <tbody> 174 <tr v-for="item in userlist" :key="item.id"> 175 <td>{{item.id}}</td> 176 <td>{{item.name}}</td> 177 <td>{{item.age}}</td> 178 <td> 179 <a href="javascript:;" @click="goDetail(item.id)">詳情</a> 180 </td> 181 </tr> 182 </tbody> 183 </table> 184 </div>` 185 }; 186 //3.用戶詳情組件 187 var UserInfo={ 188 props: ['id'], 189 template: `<div> 190 <h5>用戶詳情頁 --- 用戶Id為：{{id}}</h5> 191 <button @click="goback()">后退</button> 192 </div>`, 193 methods: { 194 goback() { 195 // 實現后退功能 196 this.$router.go(-1) 197 } 198 } 199 }; 200 //4.其它組件 201 var Rights = { 202 template: `<div> 203 <h3>權限管理區域</h3> 204 </div>` 205 } 206 var Goods = { 207 template: `<div> 208 <h3>商品管理區域</h3> 209 </div>` 210 } 211 var Orders = { 212 template: `<div> 213 <h3>訂單管理區域</h3> 214 </div>` 215 } 216 var Settings = { 217 template: `<div> 218 <h3>系統設置區域</h3> 219 </div>` 220 } 221 //二.創建路由規則 222 var myRouter=new VueRouter({ 223 routes:[ 224 { 225 path:'/', 226 component:App, 227 redirect:'/users', 228 children:[ 229 {path:'/users',component:Users}, 230 {path:'/userinfo/:id',component:UserInfo,props:true}, 231 { path: '/rights', component: Rights }, 232 { path: '/goods', component: Goods }, 233 { path: '/orders', component: Orders }, 234 { path: '/settings', component: Settings } 235 ] 236 } 237 ] 238 }); 239 240 //三. Vue實例 241 var vm = new Vue({ 242 el: '#myApp', 243 router:myRouter 244 }); 245 </script> 246 </body> 247 </html>
3. 運行效果
!
- 作 者 : Yaopengfei(姚鵬飛)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 聲 明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
- 聲 明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。