在使用vue.js创建单页运用的时候，我们通常的做法是配合vue-router一起使用，通过vue-router将组建映射到路由并进行渲染。
例如我们要实现两个页面的切换跳转，就需要使用路由，这里不再使用a标签进行跳转，而是使用标签<router-link>，然后通过属性to来指定链接，最后将路由匹配到的组件渲染到<router-view>中。
在下面的这个例子中，我们要实现主页和新闻两个页面的切换，需要以下几步：
1，两个用于切换的页面组件。
2，配置路由，将组件映射到路由中去，告诉路由在哪里渲染哪个页面。
3，创建router实例。
4，挂载根实例。
这样几步以后，一个简单的vue-router实例就实现了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="vue.js"></script> <script src="vue-router.min.js"></script> </head> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </div> <div> <router-view></router-view> </div> </div> <script> var Home={template:'<h3>我是主页</h3>'}; var News={template:'<h3>我是新闻</h3>'}; const routes=[ {path:'/home', component:Home}, {path:'/news', component:News}, {path:'*', redirect:'/home'} ]; const router=new VueRouter({ routes }); new Vue({ router, el:'#box' }); </script> </body> </html>
查看代码结构的时候我们发现，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，所以，我们可以在刚刚的代码加入一段样式便于查看。
<style> .router-link-active{ font-size: 20px; color:#f60; } </style>
动态匹配路由
我们在写页面的时候，经常会碰到页面只是数据不同，但是都是同一个页面模板的情况，也就是说这些路由对应的是同一个组件，只是参数不同，导致获取的数据不一样，例如下面这种情况：
两个路由请求的页面采用的一样的模板，为了简化操作，方便维护，我们可以实现模板组件的复用，将两个路由映射到同一个组件上去，此时，我们可以在vue-router的路由路径中使用动态路径参数来实现我们期望的效果。
在前面我们提到，在共用组件模板的时候，路径所带的参数是不一样的，这些参数都存在一个叫$router.params的对象中，关于这个对象，官网给出的例子是这样的：
所谓的模式，就是我们在配置路由的时候，路径path的属性值，每段路由参数由一个/名称/:路由参数值组成；而匹配路径则是指标签<router-link>的属性to后面所带的链接；最后则是匹配到路由后，$router.params对象中的参数值，用户可以根据这个对象，获取自己需要传递的信息。结合上面的表格，我们可以这样实现上免图片所示的动态路由效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>aaa</title> <style> .router-link-active{ font-size: 20px; color:#f60; } </style> <script src="vue.js"></script> <script src="vue-router.min.js"></script> </head> <body> <div id="box"> <p> <router-link to="/user/bbb/id/222">用户A</router-link> <router-link to="/user/aaa/id/111">用户B</router-link> </p> <router-view></router-view> </div> <script> const User = { template: `<div >{{$route.params}}</div>` } const routes= [ { path: '/user/:username/ID/:id', component: User } ] const router=new VueRouter({ routes }); new Vue({ router, el:'#box' }); </script> </body> </html>
嵌套路由
嵌套路由，顾名思义就是路由组件里面继续存在路由结构，我们知道，在跟节点上面的使用路由后，所有匹配到的组件都会被渲染到<router-view>，这个是最顶层的出口，那么在嵌套路由里面的，某个具有子级路由的组件，也可以拥有自己的<router-view>，用于渲染子路由匹配到的组件。
实现路由跳转需要先配置路由，那么嵌套路由也是一样的配置方法，只是会将子路由统一配置在所属路由的children参数中：
具体实现方式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> .router-link-active{ font-size: 20px; color:#f60; } </style> <script src="vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.min.js"></script> </head> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <router-view></router-view> </div> </div> <script> var Home={ template:'<h3>我是主页</h3>' }; var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li><router-link to="/user/strive/age/10">Strive</router-link></li> <li><router-link to="/user/blue/age/80">Blue</router-link></li> <li><router-link to="/user/eric/age/70">Eric</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` }; var UserDetail={ template:'<div>{{$route.params}}</div>' }; const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ {path:':username/age/:age', component:UserDetail} ] }, {path:'*', redirect:'/home'} ]; const router=new VueRouter({ routes }); new Vue({ router, el:'#box' }); </script> </body> </html>
