第二十三节——路由守卫
一、概念
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。简单理解：导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，比如跳转前是否验证登录等，这就是导航守卫。
二、全局守卫
是指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数。钩子函数按执行顺序包括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) {
}