vue-router的基础和使用，给大家推荐一篇写得很清晰并且通俗易懂的文章：
关于vue-router的基础和使用，大家可以看这一篇文章。
https://www.jianshu.com/p/4c5c99abb864
学有余力的小伙伴，可以继续往下看，我们关于vue-router导航守卫的解析：
一、导航守卫是什么
导航守卫就是路由跳转过程中的一些钩子函数。
因为路由跳转过程分为跳转前中后几个阶段，每个阶段都有各自的函数，在这些函数里我们可以执行一些具体操作，这就需要导航守卫。
我们先来看一下官方给出的解析流程：
- 导航被触发。
- 在失活的组件里调用beforeRouteLeave守卫。
- 调用全局的beforeEach守卫。
- 在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的beforeResolve守卫 (2.5+)。
- 导航被确认。
- 调用全局的afterEach钩子。
- 触发DOM更新。
- 用创建好的实例调用beforeRouteEnter守卫中传给 next 的回调函数。
不清楚啥意思？没关系，我们来分类了解：
二、导航分类
导航守卫有三种：全局的、单个组件独享的、组件内部的。
1. 全局的：
这一类导航守卫在路由实例上直接操作。按顺序分为：beforeEach、beforeResolve、afterEach。
（1）beforeEach(to, from, next)：跳转前触发，常用于登录验证等需要跳转前告知的情况。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
（2）beforeResolve(to, from, next)：跳转前触发。
（3）afterEach(to, from)：跳转后触发，在beforeRouteEnter(组件内守卫)之前。
2. 独享的
独享的要在路由中进行单独配置，只有一个beforeEnter，和全局的beforeEach完全相同，如果都设置则在beforeEach之后紧随执行。如图：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
3. 组件内：
类似于组件内的生命周期，如图：
export default{
data(){
//...
},
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被confirm前调用
// 不能获取组件实例 `this`，因为守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用，可以访问组件实例 `this`
// 带动态参数的路径 /foo/:id，在/foo/1和/foo/2之间跳转，会渲染同样的组件，这个钩子就会被调用。
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
}
}
1.beforeRouteEnter
不能访问组件实例this，因为他在beforeCreate生命周期前触发。如果要访问组件实例，需要传一个回调给 next。导航被确认时执行回调(mounted之后)。可以在这个守卫中请求服务端获取数据及赋值等。
beforeRouteEnter (to, from, next) {
// 这里还无法访问到组件实例，this === undefined
next( vm => {
// 通过 `vm` 访问组件实例
})
}
2. beforeRouteUpdate
当前路由改变，且该组件被复用时。
3. beforeRouteLeave
导航离开该组件的对应路由时。
※ 总结一下，点击切换路由时的执行顺序：
一张表格就清楚了~OK？
关注公众号【CC前端手记】一起学更多前端小知识吧~