Vue路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

路由前置守卫:

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

当导航路由触发时,全局前置守卫会按照顺序调用。

to:即将要进入的目标。

from:将要离开的路由。

全局解析路由:

你可以用router.beforeResolve注册一个全局守卫。

router.beroeResolve是获取数据和执行任何其他操作。

全局后置钩子:

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

 路由独享守卫:

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

 路由独享守卫是在路由配置页面单独给路由配置一个守卫。

完整的导航解析流程:

导航被触发。
在失活的组件里调用beforeRouterleave守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。