vue-router4 路由守卫

Vue Router 4（也称为 Vue Router 4.x 或者 Vue Router 4.0）是一个用于构建单页面应用（SPA）的路由管理库，它允许你在导航期间添加额外的功能，如授权、数据验证或状态切换前的操作。路由守卫（Guards）是Vue Router 4的核心特性之一，它们有三种类型：

1. **Before Navigation Guards** (全局前置守卫)：在每次导航开始之前运行，包括组件内的嵌套路由。常见的用途有登录检查、权限控制等。可以设置两个钩子函数：`beforeEach` 和 `beforeResolve`。

router.beforeEach((to, from, next) => {
   // ...
   next();
});

2. **Route-level Guard** (路由级前置守卫)：每个单独的路由都有自己的前置守卫，只针对特定路径生效。常用的钩子函数是 `beforeEnter`。

const router = new VueRouter({
  routes: [
    {
      path: '/private',
      component: PrivateComponent,
      beforeEnter(to) {
        // ...
        next(); // 让导航继续
        // next(false); // 阻止导航
      }
    }
  ]
});

3. **After Navigation Guards** (后置守卫)：导航完成后运行，无论导航是否成功。这两个是 `afterEach` 和 ` afterEach败 resolve`。

router.afterEach((to, from, error) => {
   // ...
});