第七节：Vuejs路由交互及后台系统路由案例

一. 简介

1.路由的概念

　　路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由:

(1).后端路由是由服务器端进行实现，并完成资源的分发。

(2).前端路由是依靠hash值(锚链接)的变化进行实现。

前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路由主要做的事情就是监听事件并分发执行事件处理函数。

案例：这里自己模拟一下路由的概念，进行tab的切换。

核心代码：

              <div>
                 <!-- 切换组件的超链接 -->
                 <a href="#/zhuye">主页</a>
                 <a href="#/keji">科技</a>
                 <a href="#/caijing">财经</a>
                 <a href="#/yule">娱乐</a>
                 <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
                 <!-- 可以把 component 标签当做是【组件的占位符】 -->
                 <component :is="comName"></component>
             </div>
                    // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
                     window.onhashchange = function() {
                         // 通过 location.hash 获取到最新的 hash 值
                         console.log(location.hash);
                         switch (location.hash.slice(1)) {
                             case '/zhuye':
                                 vm.comName = 'zhuye'
                                 break
                             case '/keji':
                                 vm.comName = 'keji'
                                 break
                             case '/caijing':
                                 vm.comName = 'caijing'
                                 break
                             case '/yule':
                                 vm.comName = 'yule'
                                 break
                         }
                     }

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表示要被重定向的新地址，设置为一个路由即可.

以上核心代码分享：（本节底部有该篇章的完整版代码）

        <div id="myApp">
             <p>2.路由基本用法</p>
             <div>
                 <router-link to="/user">User</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
             </div>
         </div>

     var router = new VueRouter({
                 //所有的路由规则
                 routes: [{
                         path: '/',
                         redirect: '/user',
                     }, //初始页面，重定向
                     {
                         path: '/user',
                         component: {
                             template: '<h1>User组件</h1>'
                         }
                     },
                     {
                         path: '/register',
                         component: {
                             template: '<h1>Register组件</h1>'
                         }
                     }
                 ]
    });

3. 路由嵌套

　　在VueRouter中的routes属性中添加 children属性，在里面添加子路由属性.

核心代码分享：（本节底部有该篇章的完整版代码）

            <p>3.嵌套路由</p>
             <div>
                 <router-link to="/user">User</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
             </div>

            var User = {
                 template: '<h1>User组件</>'
             };
             var Register = {
                 template: `
                     <div>
                         <h1>Register组件</h1>
                         <router-link to="/register/tab1">tab1</router-link>
                         <router-link to="/register/tab2">tab2</router-link>
                         <router-view></router-view>
                     </div>`
             };
             var Tab1 = {
                 template: '<h1>tab1组件</>'
             };
             var Tab2 = {
                 template: '<h1>tab2组件</>'
             };
             var router = new VueRouter({
                 //所有的路由规则
                 routes: [{
                         path: '/',
                         redirect: '/user', //初始页面，重定向
                     },
                     {
                         path: '/user',
                         component: User
                     },
                     //子路由规则
                     {
                         path: '/register',
                         component: Register,
                         children:[{
                             path:'/register/tab1',
                             component:Tab1
                         },
                         {
                             path:'/register/tab2',
                             component:Tab2
                         }]
                     }
                 ]
             });

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'})

核心代码分享：（本节底部有该篇章的完整版代码）

            <p>4.动态路由</p>
             <div>
                 <router-link to="/user/1">User1</router-link>
                 <router-link to="/user/2/ypf">User2</router-link>
                 <router-link to="/user/3">User3</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
             </div>
             //4.动态路由
             //4.1 方式1
             var User = {
                 template: '<h1>User组件，传递过来的id为：{{$route.params.id}},传递过来的name为：{{$route.params.name}}</h1>'
             };
             var Register = {
                 template: '<h1>register组件</>'
             };
             var router=new VueRouter({
                 routes:[
                     {path:'/',redirect:'/user/1'},
                     {path:'/user/:id',component:User},
                     {path:'/user/:id/:name',component:User},
                     {path:'/register',component:Register}
                 ]
             });

             //4.2 方式2
             var User = {
                 props:['id','name'],
                 template: '<h1>User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}}</h1>'
             };
             var Register = {
                 template: '<h1>register组件</>'
             };
             var router=new VueRouter({
                 routes:[
                     {path:'/',redirect:'/user/1'},
                     {path:'/user/:id',component:User,props:true},
                     {path:'/user/:id/:name',component:User,props:true},
                     {path:'/register',component:Register}
                 ]
             });

             //4.3 方式3
             var User = {
                 props:['id','name','age'],
                 template: '<h4>User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}</h4>'
             };
             var Register = {
                 template: '<h4>register组件</h4>'
             };
             var router=new VueRouter({
                 routes:[
                     {path:'/',redirect:'/user/1'},
                     {path:'/user/:id',component:User,props:true},
                     {path:'/user/:id/:name',component:User,props:{age:'100'}},
                     {path:'/register',component:Register}
                 ]
             });

             //4.4 方式4
             var User = {
                 props:['id','name','age'],
                 template: '<h4>User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}</h4>'
             };
             var Register = {
                 template: '<h4>register组件</h4>'
             };
             var router=new VueRouter({
                 routes:[
                     {path:'/',redirect:'/user/1'},
                     {path:'/user/:id', name: 'myuser', component:User,props:(route)=>({id:route.params.id, name:'ypf',age:'100'})},
                     {path:'/register',component:Register}
                 ]
             });
             

5. 命名路由

　　通过name属性给路由规则添加个别名，例： name: 'myuser'，然后在路由使用中，直接通过：to属性传递name即可，参数通过params传递。

核心代码分享：（本节底部有该篇章的完整版代码）

            <div>
                 <router-link to="/user/1">User1</router-link>
                 <router-link :to="{ name: 'myuser', params: {id: 2} }">User2</router-link>
                 <router-link to="/user/3">User3</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
                 <button @click="goRegister">进入Register</button>
             </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 );

代码分享：

本章节完整代码分享：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>路由相关</title>
         <style type="text/css">
             p {
                 font-size: 18px;
                 color: blue;
             }
         </style>
     </head>
     <body>
         <div id="myApp">
             <p>1.自己模拟一个前端路由</p>
             <div>
                 <!-- 切换组件的超链接 -->
                 <a href="#/zhuye">主页</a>
                 <a href="#/keji">科技</a>
                 <a href="#/caijing">财经</a>
                 <a href="#/yule">娱乐</a>
                 <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
                 <!-- 可以把 component 标签当做是【组件的占位符】 -->
                 <component :is="comName"></component>
             </div>
             <p>2.路由基本用法</p>
             <div>
                 <router-link to="/user">User</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
             </div>
             <p>3.嵌套路由</p>
             <div>
                 <router-link to="/user">User</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
             </div>
             <p>4.动态路由</p>
             <div>
                 <router-link to="/user/1">User1</router-link>
                 <router-link to="/user/2/ypf">User2</router-link>
                 <router-link to="/user/3">User3</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
             </div>
             <p>5.命名路由</p>
             <div>
                 <router-link to="/user/1">User1</router-link>
                 <router-link :to="{ name: 'myuser', params: {id: 2} }">User2</router-link>
                 <router-link to="/user/3">User3</router-link>
                 <router-link to="/register">Register</router-link>
                 <!-- 路由占位符 -->
                 <router-view></router-view>
                 <button @click="goRegister">进入Register</button>
             </div>
         </div>
         <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
         <script type="text/javascript">
             //基本使用、重定向 (需要注释掉其它的规则)
             // var router = new VueRouter({
             //     //所有的路由规则
             //     routes: [{
             //             path: '/',
             //             redirect: '/user',
             //         }, //初始页面，重定向
             //         {
             //             path: '/user',
             //             component: {
             //                 template: '<h1>User组件</h1>'
             //             }
             //         },
             //         {
             //             path: '/register',
             //             component: {
             //                 template: '<h1>Register组件</h1>'
             //             }
             //         }
             //     ]
             // });

             //嵌套路由(需要注释掉其它的规则)
             var User = {
                 template: '<h1>User组件</>'
             };
             var Register = {
                 template: `
                     <div>
                         <h1>Register组件</h1>
                         <router-link to="/register/tab1">tab1</router-link>
                         <router-link to="/register/tab2">tab2</router-link>
                         <router-view></router-view>
                     </div>`
             };
             var Tab1 = {
                 template: '<h1>tab1组件</>'
             };
             var Tab2 = {
                 template: '<h1>tab2组件</>'
             };
             var router = new VueRouter({
                 //所有的路由规则
                 routes: [{
                         path: '/',
                         redirect: '/user', //初始页面，重定向
                     },
                     {
                         path: '/user',
                         component: User
                     },
                     //子路由规则
                     {
                         path: '/register',
                         component: Register,
                         children:[{
                             path:'/register/tab1',
                             component:Tab1
                         },
                         {
                             path:'/register/tab2',
                             component:Tab2
                         }]
                     }
                 ]
             });

             //4.动态路由
             //4.1 方式1
             // var User = {
             //     template: '<h1>User组件，传递过来的id为：{{$route.params.id}},传递过来的name为：{{$route.params.name}}</h1>'
             // };
             // var Register = {
             //     template: '<h1>register组件</>'
             // };
             // var router=new VueRouter({
             //     routes:[
             //         {path:'/',redirect:'/user/1'},
             //         {path:'/user/:id',component:User},
             //         {path:'/user/:id/:name',component:User},
             //         {path:'/register',component:Register}
             //     ]
             // });

             //4.2 方式2
             // var User = {
             //     props:['id','name'],
             //     template: '<h1>User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}}</h1>'
             // };
             // var Register = {
             //     template: '<h1>register组件</>'
             // };
             // var router=new VueRouter({
             //     routes:[
             //         {path:'/',redirect:'/user/1'},
             //         {path:'/user/:id',component:User,props:true},
             //         {path:'/user/:id/:name',component:User,props:true},
             //         {path:'/register',component:Register}
             //     ]
             // });

             //4.3 方式3
             // var User = {
             //     props:['id','name','age'],
             //     template: '<h4>User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}</h4>'
             // };
             // var Register = {
             //     template: '<h4>register组件</h4>'
             // };
             // var router=new VueRouter({
             //     routes:[
             //         {path:'/',redirect:'/user/1'},
             //         {path:'/user/:id',component:User,props:true},
             //         {path:'/user/:id/:name',component:User,props:{age:'100'}},
             //         {path:'/register',component:Register}
             //     ]
             // });

             //4.4 方式4
             var User = {
                 props:['id','name','age'],
                 template: '<h4>User组件，传递过来的id为：{{id}} 或{{$route.params.id}},传递过来的name为：{{name}},传递过来的age的：{{age}}</h4>'
             };
             var Register = {
                 template: '<h4>register组件</h4>'
             };
             var router=new VueRouter({
                 routes:[
                     {path:'/',redirect:'/user/1'},
                     {path:'/user/:id', name: 'myuser', component:User,props:(route)=>({id:route.params.id, name:'ypf',age:'100'})},
                     {path:'/register',component:Register}
                 ]
             });

             var vm = new Vue({
                 el: '#myApp',
                 data: {
                     comName: 'zhuye'
                 },
                 methods: {
                     goRegister:function(){
                          this.$router.push('/register')
                     }
                 },
                 components: {
                     'zhuye': {
                         template: "<h1>主页信息</h1>"
                     },
                     'keji': {
                         template: "<h1>科技信息</h1>"
                     },
                     'caijing': {
                         template: "<h1>财经信息</h1>"
                     },
                     'yule': {
                         template: "<h1>娱乐信息</h1>"
                     }
                 },
                 router: router,
                 mounted: function() {
                     //自己模拟路由 （暂时注释）
                     // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
                     window.onhashchange = function() {
                         // 通过 location.hash 获取到最新的 hash 值
                         console.log(location.hash);
                         switch (location.hash.slice(1)) {
                             case '/zhuye':
                                 vm.comName = 'zhuye'
                                 break
                             case '/keji':
                                 vm.comName = 'keji'
                                 break
                             case '/caijing':
                                 vm.comName = 'caijing'
                                 break
                             case '/yule':
                                 vm.comName = 'yule'
                                 break
                         }
                     }
                 }

             })
         </script>
     </body>
 </html>

三. 后台系统路由案例

1. 实现功能

　　利用模板和路由配合，点击左侧列表，右侧显示对应的内容，点击用户表格中的详情，进入到对应的详情页面，然后点击返回，可以返回回去。

2. 代码分享

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>路由案例</title>
         <style type="text/css">
             html,
             body,
             #app {
                 margin: 0;
                 padding: 0px;
                 height: 100%;
             }

             .header {
                 height: 50px;
                 background-color: #545c64;
                 line-height: 50px;
                 text-align: center;
                 font-size: 24px;
                 color: #fff;
             }

             .footer {
                 height: 40px;
                 line-height: 40px;
                 background-color: #888;
                 position: absolute;
                 bottom: 0;
                 width: 100%;
                 text-align: center;
                 color: #fff;
             }

             .main {
                 display: flex;
                 position: absolute;
                 top: 50px;
                 bottom: 40px;
                 width: 100%;
             }

             .content {
                 flex: 1;
                 text-align: center;
                 height: 100%;
             }

             .left {
                 flex: 0 0 20%;
                 background-color: #545c64;
             }

             .left a {
                 color: white;
                 text-decoration: none;
             }

             .right {
                 margin: 5px;
             }

             .btns {
                 width: 100%;
                 height: 35px;
                 line-height: 35px;
                 background-color: #f5f5f5;
                 text-align: left;
                 padding-left: 10px;
                 box-sizing: border-box;
             }

             button {
                 height: 30px;
                 background-color: #ecf5ff;
                 border: 1px solid lightskyblue;
                 font-size: 12px;
                 padding: 0 20px;
             }

             .main-content {
                 margin-top: 10px;
             }

             ul {
                 margin: 0;
                 padding: 0;
                 list-style: none;
             }

             ul li {
                 height: 45px;
                 line-height: 45px;
                 background-color: #a0a0a0;
                 color: #fff;
                 cursor: pointer;
                 border-bottom: 1px solid #fff;
             }

             table {
                 width: 100%;
                 border-collapse: collapse;
             }

             td,
             th {
                 border: 1px solid #eee;
                 line-height: 35px;
                 font-size: 12px;
             }

             th {
                 background-color: #ddd;
             }
         </style>
     </head>
     <body>
         <div id="myApp">
             <!-- 路由占位符 -->
             <router-view></router-view>
         </div>

         <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
         <script type="text/javascript">
             //一.定义各种模板组件（以下全是局部组件）
             //1. 根组件
             var  App = {
                 template: `<div>
                   <header class="header">后台管理系统</header>
                   <div class="main">
                     <div class="content left">
                       <ul>
                         <li><router-link to="/users">用户管理</router-link></li>
                         <li><router-link to="/rights">权限管理</router-link></li>
                         <li><router-link to="/goods">商品管理</router-link></li>
                         <li><router-link to="/orders">订单管理</router-link></li>
                         <li><router-link to="/settings">系统设置</router-link></li>
                       </ul>
                     </div>
                     <div class="content right"><div class="main-content">
                       <router-view />
                     </div></div>
                   </div>
                   <footer class="footer">版权信息</footer>
                 </div>`
             };
             //2.用户组件
              var Users={
                  data:function(){
                      return {
                          userlist: [
                            { id: 1, name: '张三', age: 10 },
                            { id: 2, name: '李四', age: 20 },
                            { id: 3, name: '王五', age: 30 },
                            { id: 4, name: '赵六', age: 40 }
                          ]
                      }
                  },
                  methods:{
                      goDetail:function(id){
                          console.log(id);
                          this.$router.push('/userinfo/'+id);
                      }
                  },
                  template:`
                     <div>
                         <h3>用户管理区域</h3>
                         <table>
                           <thead>
                             <tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
                           </thead>
                           <tbody>
                             <tr v-for="item in userlist" :key="item.id">
                               <td>{{item.id}}</td>
                               <td>{{item.name}}</td>
                               <td>{{item.age}}</td>
                               <td>
                                 <a href="javascript:;" @click="goDetail(item.id)">详情</a>
                               </td>
                             </tr>
                           </tbody>
                         </table>
                       </div>`
              };
             //3.用户详情组件
             var UserInfo={
                 props: ['id'],
                 template: `<div>
                   <h5>用户详情页 --- 用户Id为：{{id}}</h5>
                   <button @click="goback()">后退</button>
                   </div>`,
                 methods: {
                   goback() {
                     // 实现后退功能
                     this.$router.go(-1)
                   }
                 }
             };
             //4.其它组件
             var Rights = {
               template: `<div>
               <h3>权限管理区域</h3>
             </div>`
             }
             var Goods = {
               template: `<div>
               <h3>商品管理区域</h3>
             </div>`
             }
             var Orders = {
               template: `<div>
               <h3>订单管理区域</h3>
             </div>`
             }
             var Settings = {
               template: `<div>
               <h3>系统设置区域</h3>
             </div>`
             }
             //二.创建路由规则
             var myRouter=new VueRouter({
                 routes:[
                     {
                         path:'/',
                         component:App,
                         redirect:'/users',
                         children:[
                             {path:'/users',component:Users},
                             {path:'/userinfo/:id',component:UserInfo,props:true},
                             { path: '/rights', component: Rights },
                             { path: '/goods', component: Goods },
                             { path: '/orders', component: Orders },
                             { path: '/settings', component: Settings }
                         ]
                     }
                 ]
             });

             //三. Vue实例
             var vm = new Vue({
                 el: '#myApp',
                 router:myRouter
             });
         </script>
     </body>
 </html>

3. 运行效果

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。