【Vue】导航守卫和keepalive

简介：正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫

一、导航守卫全解析

钩子也有回调的意思hook，后置钩子没有next

先看一个钩子函数执行后输出的顺序截图

---

导航守卫分类

• 全局
• 单个路由独享
• 组件内

---

全局导航守卫

【全局的】：是指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数，如下的写法。钩子函数按执行顺序包括beforeEach、beforeResolve（2.5+）、afterEach三个（以下的钩子函数都是按执行顺序讲解的）：

全局导航守卫使用：

1.在index.js创建路由实例
2.router掉用beforeEach

const router = new VueRouter({
    ... })

router.beforeEach((to, from, next) => {
   
  // from来自哪里
  // to去哪里
  // next 必须调用的
})

[beforeEach]：在路由跳转前触发，参数包括to,from,next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

[beforeResolve]（2.5+）：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。

[afterEach]：和beforeEach相反，他是在路由跳转完成后触发，参数包括to,from没有了next（参数会单独介绍）,他发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫，后讲）之前。

---

独享守卫

【路由独享的】 是指在单个路由配置的时候也可以设置的钩子函数，其位置就是下面示例中的位置，也就是像Foo这样的组件都存在这样的钩子函数。目前他只有一个钩子函数beforeEnter：

const router = new VueRouter({
   
  routes: [
    {
   
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
   
        // ...
      }
    }
  ]
})

[beforeEnter]：和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to、from、next

---

组件内守卫

【组件内的】：是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate (2.2+)、beforeRouteLeave三个，执行位置如下：