虽然Vue.js未提供路由功能，但是官方推出了Vue Router（即vue-router库），以插件的形式支持。它与Vue.js深度集成，可快速的创建单页应用（Single Page Application，SPA）。
一、基本用法
首先需要引入vue和vue-router两个库，如果像下面这样全局引用（即存在全局变量Vue），那么vue-router会自动调用Vue.use()方法注册其自身；但如果以模块的方式引用，那么就得显式地调用Vue.use()。
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script>
然后添加两个内置的组件，第一个是导航用的router-link组件，它默认会被渲染成<a>元素，如果要渲染成其它元素，那么可以使用它的tag属性；第二个是路径匹配时用于渲染视图的router-view组件，它还是一个函数式组件，如下所示。
<div id="container"> <router-link to="/main">首页</router-link> <router-link to="/list">列表</router-link> <router-view></router-view> </div>
再声明要渲染的组件，这些组件会与指定的路由映射，下面是两个非常简单的自定义组件。
const Main = { template: '<div>首页</div>' };
const List = { template: '<div>列表</div>' };
接着定义路由配置，添加一组路径以及对应的组件，如下所示。
const routes = [ { path: '/main', component: Main }, { path: '/list', component: List } ];
最后创建路由器实例，并将之前的路由配置传递进来，在挂载根实例时，需要将它注入，从而让整个应用都有路由功能，如下所示。
const router = new VueRouter({ routes: routes }); var vm = new Vue({ el: "#container", router: router });
注意，router实例包含三个导航方法：push()、replace()和go()，可以用编程的方式进行导航。
页面在渲染完成后，得到的DOM结构如下所示，此时router-view组件所占的位置无任何内容。
<div id="container"> <a href="#/main" class="">首页</a> <a href="#/list" class="">列表</a> </div>
当router-link组件所对应的路由匹配成功时，其渲染出的元素会被自动添加一个CSS类：router-link-active。例如点击首页链接，得到的结构如下所示，注意，此时router-view组件被替换成了Main组件中的内容。
<div id="container"> <a href="#/main" class="router-link-active">首页</a> <a href="#/list" class="">列表</a> <div>首页</div> </div>
二、路由模式
Vue Router默认采用URL hash模式来保持页面和URL的同步，其创建的URL格式需要包含井号（#），如下所示。
http://pwstrick.com/#/main
Vue Router还有另外一种history模式，利用HTML5 History来保持页面和URL的同步，其创建的URL格式在视觉上更为简洁清晰，如下所示。
http://pwstrick.com/main
如果要开启history模式，那么需要在路由配置时添加mode选项，并赋予history关键字，如下所示（直接修改了上一节中的示例）。
const router = new VueRouter({ mode: "history", routes: routes });
注意，当直接访问history模式创建的URL时，会返回一个404页面。为了避免这种情况的发生，建议在服务器上配置一个默认的候选页面。
三、路由
本节不仅会介绍动态路由的概念，还会分析路由的命名和嵌套等操作。
1）动态路由
Vue Router采用的路径匹配引擎是path-to-regexp，它支持动态路由的匹配，例如有一个List组件，需要根据路径中的页码参数把组件渲染成不同的内容，可以像下面这样配置。
const List = { template: '<div>{{$route.params.page}}</div>' };
const routes = [
{ path: '/list/:page', component: List }
];
在路由配置中，以冒号开头的:page是路径参数，它的值会被保存到路由对象$route的params属性中。路由对象不仅包含解析URL得到的信息（例如路径、查询字符串、锚点等），还有匹配到的路由信息（例如路由名称、路由记录等）。当路径是/list/1时，$route.params的值为{page: 1}，params是一个对象，其键值与路径参数对应。注意，一条路径可以包含多个不同的路径参数。
当一个路径能匹配多个路由时，匹配优先级会按照路由的定义顺序来排，即先定义的，优先级高。下面的配置包含两个路由，当路径是/list/1时，只会渲染List组件。
const routes = [ { path: '/list/:page', component: List }, { path: '/list/1', component: Main } ];
2）命名路由
可以在配置时为路由标识一个名称，从而就能在使用时省略路径了，如下所示，name属性的值就是路由名称。
const routes = [ { path: '/list/:page', component: List, name: "list" } ];
如果要导航到一个命名路由，那么需要动态地绑定to属性，并为其传入路由的名称以及可选的URL参数，如下所示。
<router-link :to="{ name: 'list', params: {page: 3} }">第三页</router-link>
3）嵌套路由
Vue Router允许嵌套路由，可通过多层嵌套的组件实现。下面是一个使用示例，首先在一个组件中声明router-view视图组件，如下所示。
const List = { template: '<router-view></router-view>' };
const Detail = { template: '<div>详情</div>' };
然后在路由配置中，添加children选项，并定义子路由。
const routes = [ { path: "/list", component: List, children: [{ path: "detail", component: Detail }] } ];
在经过这一系列操作后，当路径是/list/detail时，Detail组件就会被渲染到List组件的视图中。
嵌套路由可用来渲染多个不同层级的视图，而利用命名视图可渲染多个同级的视图。在下面的代码中，为第二个router-view组件添加了name属性，赋予它一个名称，而第一个router-view组件的默认名称为default。
<router-view></router-view> <router-view name="detail"></router-view>
在路由配置时，新增用于记录各个命名组件的components选项，如下所示。
const routes = [ { path: "/named", components: { default: Main, detail: Detail } } ];
当路径是/named时，Main和Detail两个组件会被同时渲染。
四、重定向和别名
1）重定向
在路由配置中，通过redirect选项可重定向到一个新的页面，该选项可取的值有三种，分别是路径、命名路由和回调函数，如下所示，其中函数中的to参数表示目标路由对象。
const routes = [ { path: "/list/1", redirect: "/main" }, { path: "/list/1", redirect: {name: "main"} }, { path: "/list/1", redirect: to => "/main" } ];
当访问的路径是/list/1时，浏览器的地址栏会变成/main，匹配的将是路径为/main的路由。
2）别名
在路由配置中，通过alias选项可定义路由的别名，如下所示。
const routes = [ { path: "/list/4", component: Detail, alias: "/detail" } ];
当访问的路径是/main时，浏览器的地址栏保持为/main，但匹配的将是路径为/list/4的路由。
五、组件传参
除了在组件中通过$route.params获取路由参数之外，还能将路由参数作为组件的props传入，从而将组件和路由解耦，如下所示。
const List = { props: ["page"], template: "<div>{{page}}</div>" }; const routes = [ { path: "/list/:page", component: List, props: true } ];
需要注意的是，在路由配置时要添加props选项，并赋予true后，才会让路由参数和props关联。
六、导航守卫
导航守卫就是路由发生变化时的钩子函数，Vue Router提供了三类守卫：全局、路由独享和组件级。
1）全局守卫
在路由器实例上可注册三个全局守卫，分别是beforeEach()、beforeResolve()和afterEach()。
beforeEach()是一个全局前置守卫，包含三个参数（如下所示），其中to是目标路由对象、from是来源路由对象，next是一个回调函数，用于解析（resolve）当前守卫。
router.beforeEach((to, from, next) => {
next();
});
由于导航在所有守卫解析之前会处于等待状态（即不会改变路径，也不会渲染对应的组件），因此在回调中不能省略next()函数。注意，该函数不仅能处理导航，还能将其中断或重定向，甚至注册一个错误。
beforeResolve()是一个全局解析守卫，其参数和beforeEach()的相同，在导航被确认前，并且组件内的守卫和异步路由组件被解析之后调用。afterEach()是一个全局后置守卫，它只有to和from两个参数。
2）路由守卫
在路由配置中可直接定义beforeEnter()守卫，作用于某个单独的路由而非全局，其参数和beforeEach()的相同，如下所示。
const routes = [ { path: "/list", component: List, beforeEnter: (to, from, next) => { next(); } } ];
3）组件守卫
组件内的导航守卫包含三个，如下所列，它们的参数都和beforeEach()的相同，也是to、from和next。
（1）beforeRouteEnter()：由于该组件在导航确认前被调用，因此组件还未被创建，从而访问this无法得到组件实例。但next()函数能接收一个参数为组件实例的回调，如下所示。
const List = { beforeRouteEnter: function(to, from, next) { next(vm => { //vm是组件实例 }); } };
（2）beforeRouteUpdate()：可通过this得到组件实例，当路由发生变化，但复用了一个组件时，会调用该守卫。例如一个路径为/list/:page的路由（如下配置所示），在将/list/1导航至list/2时，由于渲染的都是List组件，因此会调用beforeRouteUpdate()守卫。
const routes = [ { path: "/list/:page", component: List } ];
（3）beforeRouteLeave()：也可通过this得到组件实例，当路由改变，并且渲染的组件不同时，会调用该守卫。例如有两条路径/main和/list，分别对应Main和List组件，在List组件中声明了beforeRouteLeave()守卫（如下所示），当从/list导航至/main时，会弹出确认框，判断是否需要取消本次导航。
const List = { beforeRouteLeave: function(to, from, next) { const answer = window.confirm("是否离开当前页？"); answer ? next() : next(false); } };
4）解析流程
完整的导航解析流程如下所列。
（1）导航被触发。
（2）在失活的组件里调用beforeRouteLeave()守卫。
（3）调用全局的beforeEach()守卫。
（4）在重用的组件里调用beforeRouteUpdate()守卫。
（5）在路由配置里调用beforeEnter()守卫。
（6）解析异步路由组件。
（7）在被激活的组件里调用beforeRouteEnter()守卫。
（8）调用全局的beforeResolve()守卫。
（9）导航被确认。
（10）调用全局的afterEach()守卫。
（11）触发DOM更新。
（12）用创建好的实例调用beforeRouteEnter()守卫中传给next参数的回调函数。