Vue.js中的路由导航守卫和其使用方法

Vue.js 中的路由导航守卫是 Vue Router 提供的一套机制，用于在路由切换的过程中执行自定义代码逻辑，包括但不限于权限验证、页面滚动位置保存、加载数据等。它分为三种类型：

1. 全局前置守卫 (Global beforeEach Guard)
   全局前置守卫应用在整个应用程序的路由跳转之前，不论你访问任何路由都会触发。注册全局前置守卫通过调用 router.beforeEach 方法，并传入一个回调函数。这个回调函数接收三个参数：

to: Route: 即将要进入的目标路由对象。
from: Route: 当前导航正要离开的路由对象。
next: Function: 调用该函数进行下一步操作。它可以接受一个可选的参数（通常是一个错误对象），决定是否以及如何继续导航流程。

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  // 在这里可以执行异步操作，例如检查用户登录状态
  if (!isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

2. 全局解析守卫 (Global afterEach Guard)
   除了前置守卫，Vue Router 还提供了全局后置守卫 (router.afterEach)，这个守卫会在每次导航完成，即将激活组件渲染之后触发，但不涉及阻止或更改导航过程。

router.afterEach((to, from) => {
  // 可以在这里记录路由历史、页面浏览统计等操作
});

3. 路由独享守卫 (Per-Route Guard)
   可以在单个路由配置中定义前置守卫和/或后置守卫，这些守卫仅针对特定路由生效：

{
  path: '/admin',
  component: AdminPanel,
  beforeEnter: (to, from, next) => {
    // 执行特定于 /admin 路由的权限检查或其他操作
    if (canAccessAdmin()) {
      next();
    } else {
      next({ name: 'access-denied' });
    }
  },
}

4. 组件内的守卫 (In-Component Guards)
   在单个路由组件内，有三种类型的守卫：

beforeRouteEnter: 组件实例还未创建时就已存在的守卫，不能直接访问组件实例，可以通过 next(vm => {}) 访问组件实例并传递给回调函数。

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.title = to.meta.title; // 设置组件标题
    });
  },
};

beforeRouteUpdate: 当路由的 params 或 query 发生变化（即当前路由路径不变，只有参数变化）时触发，此时可以直接访问组件实例。

export default {
  beforeRouteUpdate(to, from, next) {
    this.loadData(to.params.id); // 更新组件数据
    next();
  },
};

beforeRouteLeave: 导航离开当前路由时触发，可以用来确认是否允许离开。

export default {
  data() {
    return {
      unsavedChanges: false,
    };
  },
  methods: {
    confirmNavigation() {
      // 用户确认逻辑...
    },
  },
  beforeRouteLeave(to, from, next) {
    if (this.unsavedChanges) {
      this.confirmNavigation().then(() => next()).catch(() => next(false));
    } else {
      next();
    }
  },
};