第二十三节——路由守卫

一、概念

提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。简单理解：导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，比如跳转前是否验证登录等，这就是导航守卫。

二、全局守卫

是指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数。钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个

1、beforeEach🚀🚀

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

router.beforeEach((to, from, next) => {
  //to 将要访问的路径
  //from 代表从哪个路径跳转而来
  //next 是一个函数，表示放行 使用后beforeEach 必须得调用next
  // next() 放行  next('/login') 强制跳转
})

2、beforeResolve

这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：

区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

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

router.beforeResolve((to, from, next) => {
  //to 将要访问的路径
  //from 代表从哪个路径跳转而来
  //next 是一个函数，表示放行 使用后beforeEach 必须得调用next
  // next() 放行  next('/login') 强制跳转
})

3、afterEach

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

router.afterEach((to, from) => {
  //to 将要访问的路径
  //from 代表从哪个路径跳转而来
})

三、beforeEnter 单个路由独享

beforeEnter 在路由配置中定义的钩子函数，它会在路由被激活之前调用。它和全局前置守卫的参数一样，但是只对该路由生效。

import { createRouter, createWebHashHistory } from "vue-router";

/**
 * 使用 createRouter 创建路由实例
 */
const router = createRouter({
  // 确定路由模式,当前使用hash模式
  history: createWebHashHistory(),
  /**
   * 定义路由表
   */
  routes: [
    {
      // 路由地址
      path: "/a",
      // 对应路由显示组件
      component: () => import("./../a.vue"),
      beforeEnter: (to, from, next) => {
        next()
      },
      /**
       * 使用 children 定义当前路由下的子路由
       * children 是一个 数组 写法和上面几乎一致
       */
      children: [
        {
          path: "/a1",
          component: () => import("./../a1.vue"),
        },
        {
          path: "/a2",
          component: () => import("./../a2.vue"),
        },
      ],
    },
    {
      // 跳转到b页面需要携带 id 和 name两个参数
      path: "/b/:id/:name",
      // 对应路由显示组件
      component: () => import("./../b.vue"),
    },
  ],
});

/**
 * 导出
 */
export default router;

四、组件内守卫

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

1、beforeRouteEnter

路由进入之前调用，参数包括to，from，next。该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined，也就是他在beforeCreate生命周期前触发。在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作，（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

2、beforeRouteUpdate

在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。

对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用 当前路由query变更时，该守卫会被调用。

beforeRouteUpdate (to, from) {
	
}

3、beforeRouteLeave

导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。只有调用next才可以跳转

beforeRouteLeave (to, from, next) {
	
}