创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes })
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由
<roter-link>
支持用户在具有路由功能的应用中导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置tag 属性生成别的标签.。
渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径， 渲染嵌套组件。
编程式导航
router.push
可以导航到不同的 URL，这个方法会向 history 添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
注意： 如果目的地和当前路由相同，只有参数发生了改变 ，就需要使用 beforeRouteUpdate 来响应这个变化 。
router.replace
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是会替换掉当前的 history 记录。
| 声明式 | 编程式 |
|---|---|
| <router-link :to="..."> | router.push(...) |
| <router-link :to="..." replace> | router.replace(...) |
router.go
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
路由重定向和别名
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } // 路由重定向 { path: '/a', component: A, alias: '/b' } // 路由别名 ] })
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
hash 模式与 history 模式
vue-router 默认使用 hash 模式，也可以使用history模式，不过别忘了在服务端增加一个覆盖所有情况的候选资源。
如果你还想对 hash 模式与 history 模式有更多的了解，可以看看我的另一篇博客：https://www.cnblogs.com/yaokai729/p/11442951.html
导航守卫
全局前置守卫
使用 router.beforeEach 注册一个全局前置守卫：
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { })
每个守卫方法接收三个参数：
-
-
to: Route：即将要进入的目标路由对象
-
from: Route：当前导航正要离开的路由
-
next: Function： 一定要调用该方法来 resolve 这个钩子函数。执行效果依赖 next 方法的调用参数。
-
next ( )：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
-
next ( false )：中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
-
next (' / ') 或者 next({ path: ' / ' })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
-
next ( error )： 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法，否则钩子就不会被 resolved。
-
-
全局解析守卫
用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
全局后置钩子
可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => { })
路由独享的守卫
在路由配置上直接定义 beforeEnter 守卫：
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { } } ] })
组件内的守卫
路由组件内直接定义以下路由导航守卫：
-
-
beforeRouteEnter
-
beforeRouteUpdate
-
beforeRouteLeave
-
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不能获取组件实例 `this`， 因为当守卫执行前，组件实例还没被创建 // 但可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` // 可以通过 next(false) 来取消 } }
注意： beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说， this 已经可用了，所以不支持传递回调。
beforeRouteLeave (to, from , next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } }
路由懒加载
通过把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，来实现懒加载。
实现路由组件的懒加载的步骤：
首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：
然后，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 ：
// 定义一个能够被 Webpack 自动代码分割的异步组件 const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })
注意：如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
把组件按组分块
如果想把某个路由下的所有组件都打包在同个异步块中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack 版本 2.4以上)。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')