刚学习vue不久，就接触了路由这个好东西。下面简单聊聊vue-router的基本用法。
一、路由的概念
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的news按钮，页面中就要显示news的内容。Home按钮 => home 内容， news按钮 => news内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。
点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。
路由中有三个基本的概念 route, routes, router。
1、 route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, news按钮 => news内容， 这是另一条路由。
2、 routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { news按钮 => news内容}]
3、 router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
4、客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，news中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
vue-router中的路由也是基于上面的内容来实现的
在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。
5、router-view作用： router-view可以 当做是一个容器，它渲染的组件是你使用 vue-router 指定的
二、vue-router基础使用
1、下载vue和vue-router
此案例用的是vue@1.0.28、vue-router@0.7.13
注意，最新版本的vue和vue-router不支持map。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue-router</title> 6 <script src="../../node_modules/vue/dist/vue.min.js"></script> 7 <script src="../../node_modules/vue-router/dist/vue-router.min.js"></script> 8 9 10 <style> 11 body,ul,li,a{ 12 padding: 0; 13 margin: 0; 14 } 15 16 ul{ 17 list-style: none; 18 overflow: hidden; 19 } 20 a{ 21 text-decoration: none; 22 } 23 24 #box{ 25 width: 600px; 26 margin: 100px auto; 27 28 } 29 #box ul{ 30 padding: 0 100px; 31 background-color: #2dc3e8; 32 } 33 34 #box ul li a{ 35 display: block; 36 width: 100px; 37 height: 50px; 38 background-color: #2dc3e8; 39 color: #fff; 40 float: left; 41 line-height:50px; 42 text-align: center; 43 } 44 #box ul li:hover{ 45 background-color: #00b3ee; 46 } 47 48 #box ul li a.v-link-active{ 49 font-size: 18px; 50 background-color: #00b3ee; 51 } 52 53 </style> 54 </head> 55 <body> 56 <div id="box"> 57 <ul> 58 <li><a v-link="{path:'/home'}">主页</a></li> 59 <li><a v-link="{path: '/news'}">新闻中心</a></li> 60 <li><a v-link="{path: '/product'}">最新产品</a></li> 61 <li><a v-link="{path: '/activity'}">促销活动</a></li> 62 </ul> 63 64 65 66 <div> 67 <router-view></router-view> 68 </div> 69 </div> 70 71 72 <script> 73 // 1.根组件 74 var App = Vue.extend(); 75 76 // 2.准备需要的组件 77 var Home = Vue.extend({ 78 template: '<h3>我是主页</h3>' 79 }); 80 81 var News = Vue.extend({ 82 template: '<h3>我是新闻</h3>' 83 }); 84 85 var Product = Vue.extend({ 86 template: '<h3>我是产品</h3>' 87 }); 88 89 var Activity = Vue.extend({ 90 template: '<h3>我是促销活动</h3>' 91 }); 92 93 // 3.准备路由 94 var router = new VueRouter(); 95 96 // 4.关联 97 router.map({ 98 'home': { 99 component: Home 100 }, 101 'news': { 102 component: News 103 }, 104 'product': { 105 component: Product 106 }, 107 'activity': { 108 component: Activity 109 } 110 111 }); 112 113 114 115 // 5.启动路由 116 router.start(App, '#box'); 117 118 // 6.默认跳转 119 router.redirect({ 120 '/':'/home' 121 }); 122 123 124 </script> 125 </body> 126 </html>
运行结果：
三 、路由嵌套
在实际开发中单路由跳转不能满足我们的需求，常常需要用到多个路由嵌套，下面是简单的路由嵌套demo.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue-router-嵌套</title> 6 <script src="../../node_modules/vue/dist/vue.min.js"></script> 7 <script src="../../node_modules/vue-router/dist/vue-router.min.js"></script> 8 9 <style> 10 11 body,ul,li,a{ 12 padding: 0; 13 margin: 0; 14 } 15 16 ul{ 17 list-style: none; 18 overflow: hidden; 19 } 20 a{ 21 text-decoration: none; 22 } 23 24 #box{ 25 width: 600px; 26 margin: 100px auto; 27 28 } 29 #box ul{ 30 padding: 0 100px; 31 background-color: #2dc3e8; 32 } 33 34 #box ul li a{ 35 display: block; 36 width: 100px; 37 height: 50px; 38 background-color: #2dc3e8; 39 color: #fff; 40 float: left; 41 line-height:50px; 42 text-align: center; 43 } 44 #box ul li:hover{ 45 background-color: #00b3ee; 46 } 47 48 #box ul li a.v-link-active{ 49 font-size: 18px; 50 background-color: #00b3ee; 51 } 52 53 </style> 54 55 </head> 56 <body> 57 <div id="box"> 58 <ul> 59 <li><a v-link="{path:'/home'}">主页</a></li> 60 <li><a v-link="{path: '/news'}">新闻中心</a></li> 61 </ul> 62 63 <div> 64 <router-view></router-view> 65 </div> 66 </div> 67 68 <template id="home"> 69 <h3>我是主页</h3> 70 <div> 71 <a v-link="{path: '/home/login/lele'}">登录</a> 72 <a v-link="{path: '/home/register'}">注册</a> 73 </div> 74 <div> 75 <router-view></router-view> 76 </div> 77 </template> 78 79 <template id="news"> 80 <h3>我是新闻</h3> 81 <div> 82 <a v-link="{path: '/news/detail/001'}">新闻001</a> 83 <a v-link="{path: '/news/detail/002'}">新闻002</a> 84 </div> 85 <router-view></router-view> 86 </template> 87 88 <template id="detail"> 89 <!--当前参数--> 90 {{$route.params |json}} 91 <br> 92 <!--当前路径--> 93 {{$route.path}} 94 <br> 95 <!--当前数据--> 96 {{$route.query |json}} 97 </template> 98 99 <script> 100 // 1.根组件 101 var App = Vue.extend(); 102 103 // 2.准备需要的组件 104 var Home = Vue.extend({ 105 template: '#home' 106 }); 107 108 var News = Vue.extend({ 109 template: '#news' 110 }); 111 112 var Detail = Vue.extend({ 113 template:'#detail' 114 }); 115 116 // 3.准备路由 117 var router = new VueRouter(); 118 119 // 4.关联 120 router.map({ 121 'home': { 122 component: Home, 123 subRoutes:{ 124 'login/:name': { 125 component:{ 126 template: '<strong>我是登录信息{{$route.params |json}}</strong>' 127 } 128 }, 129 'register': { 130 component:{ 131 template: '<strong>我是注册信息</strong>' 132 } 133 } 134 } 135 }, 136 'news': { 137 component: News, 138 subRoutes: { 139 '/detail/:id': { 140 component: Detail 141 } 142 } 143 } 144 }); 145 146 147 148 // 5.启动路由 149 router.start(App, '#box'); 150 151 // 6.跳转 152 router.redirect({ 153 '/':'/home' 154 }); 155 156 157 </script> 158 </body> 159 </html>
运行结果：
