导航守卫的使用

直白的说，导航守卫就是路由跳转过程中的一些钩子函数，这些函数能让你在跳转过程中操作一些其他的事儿的时机，这就是导航守卫。

比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。此时可以使用路由导航来实现。

导航守卫有三种：全局的, 单个路由独享的, 组件级的。

一、单个路由

写在路由配置中

beforeEnter 有三个参数，to，from，next

beforeEnter: (to, form, next) => {
                console.log(to, form, next);
                next("/home")
            }

二、全局的

在router/index.js中

beforeEach 使用 router.beforeEach 注册一个全局前置守卫，有三个参数，to，from，next

beforeResolve 用 router.beforeResolve 注册一个全局解析守卫，在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

afterEach 全局后置钩子，它没有next 参数，也不会改变导航本身，因为此时导航已经完成。

使用最多的还是beforeEach，例：

router.beforeEach((to, form, next) => {
    next()
})

三、组件内

作为属性写在组件内

beforeRouteEnter 此时组件实例还没被创建，不能获取组件实例this

beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用，可以访问组件实例this

beforeRouteLeave 导航离开该组件的对应路由时调用，可以访问组件实例this

beforeRouteEnter((to, form, next) => {
    next()
})