基础概念
导航守卫就是路由跳转过程中的一些钩子函数，这些函数能让你在跳转过程中操作一些其他的事儿的时机，这就是导航守卫。
比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。此时可以使用路由导航来实现。
导航守卫有三种：全局的, 单个路由独享的, 组件级的。
单个路由的
{ path: '/', name: 'index', component: Index, beforeEnter: (to, from, next) => { console.log(to, from, next); if (uid) { next() } else { next('/login') } } },
全局的
router.beforeEach((to, from) => { // 返回 false 以取消导航 return false })
组件内的
<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>
