第七节：Vuejs路由交互及后台系统路由案例
一. 简介
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 8 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.添加路由链接:
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">Userrouter-link> 6 <router-link to="/register">Registerrouter-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: 'User组件
' 11 } 12 }, 13 { 14 path: '/register', 15 component: { 16 template: 'Register组件
' 17 } 18 } 19 ] 20 });
3. 路由嵌套
在VueRouter中的routes属性中添加 children属性，在里面添加子路由属性.
核心代码分享：（本节底部有该篇章的完整版代码）
13.嵌套路由
238 9 var User = { 10 template: 'User 4Register 5 67 User组件' 11 }; 12 var Register = { 13 template: ` 14
15` 20 }; 21 var Tab1 = { 22 template: 'Register组件
16tab1 17tab2 1819 tab1组件' 23 }; 24 var Tab2 = { 25 template: '
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'})
核心代码分享：（本节底部有该篇章的完整版代码）
14.动态路由
2310 //4.动态路由 11 //4.1 方式1 12 var User = { 13 template: 'User1 4User2 5User3 6Register 7 89 User组件，传递过来的id为：{{$route.params.id}},传递过来的name为：{{$route.params.name}}
' 14 }; 15 var Register = { 16 template: '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: '
User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}}
' 31 }; 32 var Register = { 33 template: '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: '
User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}
' 48 }; 49 var Register = { 50 template: 'register组件
' 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: 'User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}
' 65 }; 66 var Register = { 67 template: 'register组件
' 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">User1router-link> 3 <router-link :to="{ name: 'myuser', params: {id: 2} }">User2router-link> 4 <router-link to="/user/3">User3router-link> 5 <router-link to="/register">Registerrouter-link> 6 7 <router-view>router-view> 8 <button @click="goRegister">进入Registerbutton> 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 23 24 <component :is="comName">component> 25 div> 26 <p>2.路由基本用法p> 27 <div> 28 <router-link to="/user">Userrouter-link> 29 <router-link to="/register">Registerrouter-link> 30 31 <router-view>router-view> 32 div> 33 <p>3.嵌套路由p> 34 <div> 35 <router-link to="/user">Userrouter-link> 36 <router-link to="/register">Registerrouter-link> 37 38 <router-view>router-view> 39 div> 40 <p>4.动态路由p> 41 <div> 42 <router-link to="/user/1">User1router-link> 43 <router-link to="/user/2/ypf">User2router-link> 44 <router-link to="/user/3">User3router-link> 45 <router-link to="/register">Registerrouter-link> 46 47 <router-view>router-view> 48 div> 49 <p>5.命名路由p> 50 <div> 51 <router-link to="/user/1">User1router-link> 52 <router-link :to="{ name: 'myuser', params: {id: 2} }">User2router-link> 53 <router-link to="/user/3">User3router-link> 54 <router-link to="/register">Registerrouter-link> 55 56 <router-view>router-view> 57 <button @click="goRegister">进入Registerbutton> 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: 'User组件
' 74 // } 75 // }, 76 // { 77 // path: '/register', 78 // component: { 79 // template: 'Register组件
' 80 // } 81 // } 82 // ] 83 // }); 84 85 //嵌套路由(需要注释掉其它的规则) 86 var User = { 87 template: '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: 'tab1组件
' 100 }; 101 var Tab2 = { 102 template: '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: 'User组件，传递过来的id为：{{$route.params.id}},传递过来的name为：{{$route.params.name}}
' 134 // }; 135 // var Register = { 136 // template: '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: 'User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}}
' 151 // }; 152 // var Register = { 153 // template: '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: 'User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}
' 168 // }; 169 // var Register = { 170 // template: 'register组件
' 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: 'User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}
' 185 }; 186 var Register = { 187 template: 'register组件
' 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: "主页信息
" 212 }, 213 'keji': { 214 template: "科技信息
" 215 }, 216 'caijing': { 217 template: "财经信息
" 218 }, 219 'yule': { 220 template: "娱乐信息
" 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></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 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
相关