面试了许多求职者，很多求职者只知其然，而不知所以然，写此文章为广大前端小伙伴指引迷津。纯干货！纯干货！纯干货！
目录
路由守卫
什么是路由守卫？
答：通过跳转或取消的方式守卫导航。
路由守卫的作用？
答:通过路由来进行一些操作，比如最常见的登录权限验证等。
路由守卫的分类？
全局守卫
beforeEach: 进入路由之前。
beforeResolve: 在beforeRouteEnter调用之后调用。
afterEach: 进入路由之后。
// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局后置钩子');
});
独享守卫
beforeEnter:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
// ...
}
}
]
});
组件内的守卫
beforeRouteEnter: 进入路由前。
beforeRouteUpdate: 路由复用同一个组件时。
beforeRouteLeave: 离开当前路由时。
beforeRouteEnter (to, from, next) {
// 在路由独享守卫后调用 不！能！获取组件实例 `this`，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
};
跳转参数
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
- next() 进入该路由。
- next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。
- next 跳转新路由，当前的导航被中断，重新开始一个新的导航。
