vue3+ts 增加路由守卫

在 Vue 3 中使用 TypeScript 添加路由守卫时，你可以使用 `beforeEach` 和 `afterEach` 方法来实现。以下是一个示例代码：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  // 路由配置...
];

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

router.beforeEach((to, from, next) => {
  // 在跳转之前执行的逻辑
  console.log('beforeEach', to, from);
  next(); // 继续跳转
});

router.afterEach((to, from) => {
  // 在跳转之后执行的逻辑
  console.log('afterEach', to, from);
});

export default router;

在这个例子中，我们首先导入所需的模块，并定义了路由配置 `routes`。然后，使用 `createRouter` 创建一个路由实例。

接下来，我们使用 `beforeEach` 方法添加一个全局前置守卫，它会在每次路由跳转之前执行。在这个示例中，我们简单地打印了要跳转的路由信息和当前路由信息。

然后，我们使用 `afterEach` 方法添加一个全局后置守卫，它会在每次路由跳转之后执行。在这个示例中，我们同样打印了要跳转的路由信息和当前路由信息。

最后，将路由实例导出供其他模块使用。

请根据你的需求在守卫中编写具体的逻辑。在 `beforeEach` 守卫中，你可以调用 `next()` 方法继续跳转，或者传递一个新的路由路径来中断跳转。在 `afterEach` 守卫中，你可以执行一些需要在路由跳转后执行的操作。