知识笔记（九十五）———Vue中的导航守卫

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

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

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

单个路由的

写在路由配置中，只在进入路由时触发，不会在?params、query 或 hash 改变时触发

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

 ? ? ? {
? ? ? ? ? ? path: '/',
? ? ? ? ? ? name: 'index',
? ? ? ? ? ? component: Index,
? ? ? ? ? ? beforeEnter: (to, from, next) => {
? ? ? ? ? ? ? ? console.log(to, from, next);
? ? ? ? ? ? ? ? if (uid) {
? ? ? ? ? ? ? ? ? ? next()
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? next('/login')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },

全局的

在router/index.js中

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

router.beforeEach((to, from) => {
? ? // 返回 false 以取消导航
? ? return false
})

可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，你可以设置诸如 replace: true 或 name: 'home' 之类的配置

如果什么都没有，undefined 或返回 true，则导航是有效的，并调用下一个导航守卫

beforeResolve?? ??? ?用 router.beforeResolve 注册一个全局解析守卫，在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用，是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置

afterEach?? ??? ?全局后置钩子，它没有next 参数，也不会改变导航本身，因为此时导航已经完成。对于分析、更改页面标题、声明页面、记录日志等辅助功能以及许多其他事情都很有用

组件内

作为属性写在组件内

beforeRouteEnter 此时组件实例还没被创建，不能获取组件实例this（组合式Api无此函数）

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

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

<script setup>
import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
import { ref } from 'vue'
const userData = ref()

// 与 beforeRouteUpdate 相同，无法访问 `this`
onBeforeRouteUpdate(async (to, from) => {
? ? // 在当前路由改变，但是该组件被复用时调用
? ? //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
? ? if (to.params.id !== from.params.id) {
? ? ? ? userData.value = await fetchUser(to.params.id)
? ? }
})
onBeforeRouteLeave((to, from) => {
? ? // 在导航离开渲染该组件的对应路由时调用
? ? const answer = window.confirm(
? ? ? ? '你真的想离开吗？您有未保存的更改!'
? ? )
? ? // 取消导航并停留在同一页面上
? ? if (!answer) return false
})
</script>

执行顺序: