导航守卫
正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫，有多种机会植入路由导航过程种：全局的，单个路由独享的，或者组件级的
记住 参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdata 的组件内守卫。
全局守卫
你可以使用router.beforeEach 注册一个全局前置守卫：
const router = new VueRouter({...})
router.beforeEach((to,form,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的toprop或者router.push中的选项
- next(error):(2.4.0+)如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调
确保要调用 next 方法，否则钩子就不会被 resolved
完整的导航解析
- 导航被触发
- 在失活的组件里调用离开守卫
- 调用全局的 beforeEach 守卫
- 在重用的组件里调用 beforeRouteUpdata 守卫
- 在路由配置里调用 beforeEnter
- 解析异步路由组件
- 在被激活的组件里调用 beforeRouteEnter
- 调用全局的 beforeResolve 守卫(2.5+)
- 导航被确认
- 调用全局的 afterEach 钩子
- 触发DOM 更新
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数
滚动行为
使用前端路由，当切换到新路由时，想要页面滚动到顶部，或者时保持原先的滚动位置，就像重新加载页面那样，vue-router就能做到
ps：这个功能只在支持 history.pushState 的浏览器中可用
当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：
const router = new VueRouter({
routes: [...]
scrollBehavior(to,from,savedPosition){
// return 期望滚动到哪个的位置
}
})
scrollBehavior 方法接收 to 和 from 路由对象，第三个参数 savedPosition 当且仅当 popstate 导航(通过浏览器的 前进\后退 按钮触发)时才可用
路由懒加载
当打包构建应用时，javascript包会变得非常大、影响页面加载，如果我们能把不同路由对应得组件分割成不同得代码块，然后当路由访问的时候才在家对应组件，这样更加高效
结合Vue的异步组件和webpack的代码分割功能，轻松实现路由组件的懒加载。
首先，可以将异步组件定义为返回一个Promise的工厂函数
const Foo = () => Promise.resolve({// 组件定义对象})
第二，在webpack2中，我们可以使用动态 import语法来定义代码分块点
import('./Foo.vue')
ps: 如果使用的时babel，你将需要添加 sybtax-dynamic-import 插件，才能使Babel可以正确的解析语法
结合这两者，这就使如何定义一个能够被webpack自动代码分割的异步组件
const Foo = () => import('./Foo.vue')
在路由配置中什么都不需要改变，只需要像往常一样使用Foo：
const router = new VueRouter({
routes: [
{path: '/foo', component: Foo}
]
})
把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步块中，只需要使用命名 chunk，一个特殊的注释语法来提高chunk name(需要webpack>2.4)
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中
