导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

当使用Vue Router时，可以利用不同类型的导航守卫来控制路由的导航和页面的渲染。下面是几种常见的导航守卫及其含义：

全局前置守卫 (beforeEach)：
- 全局前置守卫是在路由跳转之前执行的钩子函数。
- 可以用于执行一些全局的前置逻辑，例如身份验证、权限检查等。
- 如果调用 next()，则继续进行路由导航；如果传递参数，则可以中断导航，并指定新的路径或者取消导航。
- 示例用法见前面提供的代码示例。
全局后置守卫 (afterEach)：
- 全局后置守卫是在路由跳转之后执行的钩子函数。
- 用于执行一些全局的后置逻辑，比如页面跟踪、日志记录等。
- 与 beforeEach 不同，afterEach 没有 next 函数，因为它不能中断导航。
路由独享的守卫：
- 路由独享的守卫是在单个路由配置中定义的守卫。
- 可以在单个路由配置对象中定义 beforeEnter 钩子来执行特定路由的前置逻辑。
- 这些守卫只对其直接所在的路由起作用。
组件内的守卫：
- 组件内的守卫是通过在组件内部定义特定的生命周期钩子来实现的。
- 例如，在组件中可以定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子，分别对应组件被导航到、组件在当前路由改变时以及组件从当前路由离开时的情况。
- 这些守卫允许在组件级别控制导航行为，例如在组件加载前进行一些逻辑处理、在组件更新前/后执行特定逻辑以及在组件离开前进行一些清理操作等。

这些导航守卫的组合使用可以灵活控制路由的行为，实现更加精细化的路由管理。

在Vue 3中，路由导航守卫依然可以使用，但是在Vue Router 4中，它们的用法有些许变化。以下是一个使用Vue 3和Vue Router 4的路由导航守卫的基本示例：

<template>
  <div></div>
</template>

<script setup>
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义你的路由配置
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 可以在这里进行一些路由跳转前的逻辑处理
  console.log('Global beforeEach guard');

  // 调用 next() 来继续导航，如果不调用，则路由跳转会被中断
  next();
});

// 全局后置钩子
router.afterEach((to, from) => {
  // 可以在这里进行一些路由跳转后的逻辑处理
  console.log('Global afterEach guard');
});

export default router;
</script>

vue3 语法糖 setup 导航守卫

导航守卫