1. 全局前置守卫： beforeEach（to，from， next）
当从一个路由跳转到另一个路由的时候触发此守卫，这个守卫也叫全局前置守卫，所以它是跳转前触发的，任何路由跳转都会触发。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
next(); // 执行下一步，如果没有next执行，就不会执行下一步
})
每个守卫都有三个参数：
- to：你要跳去的路由对象。
- from：你要离开的路由对象。
- next：是一个方法，它接受参数。这个方法必须调用要不就跳不过去了，你可以把它看做保安，必须给它打个招呼，要不然不让你过。
next()：这就是告诉保安我要过去，去哪里呢？ 就是to了。
next(false)：如果传入false。保安就不让过了。也就是中断跳转。
next({path:“/”})或者next(’/’)：这个意思是保安不让过，并把你交到另一地方审查了。也就是中断跳转，跳转到一个新的路径。
注意：一般判断用户是否登录或者用户权限之类的功能，都会在这里进行判断
2. 全局解析守卫： beforeResolve（to，from， next）
这个钩子和beforeEach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。
3. 全局后置钩子： afterEach（to，from）
全局后置钩子不会接受 next函数也不会改变导航本身，和beforeEach相反，它是在路由跳转完成后触发，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）next（）之前。
router.afterEach((to, from) => {
// ...
})
4. 路由独享的守卫： beforeEnter（to，from， next）
这个守卫是写在路由里面的，只有当进入这个路由时才会调用的， 路由独享守卫和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
next(); // 执行下一步，如果没有next执行，就不会执行下一步
}
}
]
})
5. 组件内的守卫：
beforeRouteEnter(to，from， next)
beforeRouteUpdate(to，from， next)
beforeRouteLeave(to，from， next)
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 守卫在导航确认前被调用
// 不能获取组件实例 `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` 访问组件实例
})
}
-
beforeRouteUpdadte：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。 -
beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过next( false )来取消。
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave?')
if (answer) {
next()
} else {
next(false)
}
}
6. 完整的导航解析流程：
- 导航被触发。
- 在失活的组件里调用 beforeRouteLeave 守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
|