源自：https://router.vuejs.org/zh/

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

constrouter=newVueRouter({
    mode:'history',
    routes:[...]
})

警告

给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

constrouter=newVueRouter({
    mode:'history',
    routes:[{
        path:'*',
        component:NotFoundComponent
    }
]})

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

constrouter=newVueRouter({...})
router.beforeEach((to,from,next)=>{// ...})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to,from)=>{// ...})

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

constrouter=newVueRouter({
    routes:[{
        path:'/foo',
        component:Foo,
        beforeEnter:(to,from,next)=>{// ...}
    }]
})

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

constFoo={
template:`...`,
beforeRouteEnter(to,from,next){
// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},beforeRouteUpdate(to,from,next){
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},beforeRouteLeave(to,from,next){
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}}

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter(to,from,next){
    next(vm=>{
        // 通过 `vm` 访问组件实例
    })
}

完整的导航解析流程

1. 导航被触发。

2. 在失活的组件里调用离开守卫。

3. 调用全局的 beforeEach 守卫。

4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5. 在路由配置里调用 beforeEnter。

6. 解析异步路由组件。

7. 在被激活的组件里调用 beforeRouteEnter。

8. 调用全局的 beforeResolve 守卫 (2.5+)。

9. 导航被确认。

10. 调用全局的 afterEach 钩子。

11. 触发 DOM 更新。

12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

定义路由的时候可以配置 meta 字段：

constrouter=newVueRouter({
routes:[{
path:'/foo',
component:Foo,
children:[{
    path:'bar',component:Bar,
    // a meta field
    meta:{requiresAuth:true
}}]}]})

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段：

router.beforeEach((to,from,next)=>{
if(to.matched.some(record=>record.meta.requiresAuth)){
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if(!auth.loggedIn()){
        next({path:'/login',
        query:{redirect:to.fullPath}
    })
    }else{
        next()
    }
}else{
    next()// 确保一定要调用 next()
}})

滚动行为

https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

constFoo=()=>Promise.resolve({/* 组件定义对象 */})

第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import('./Foo.vue')// 返回 Promise

注意

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

constFoo=()=>import('./Foo.vue')

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

constrouter=newVueRouter({
routes:[{path:'/foo',component:Foo}
]})

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

constFoo=()=>import(/* webpackChunkName: "group-foo" */'./Foo.vue')
constBar=()=>import(/* webpackChunkName: "group-foo" */'./Bar.vue')
constBaz=()=>import(/* webpackChunkName: "group-foo" */'./Baz.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。