vue3 路由守卫给路由加参数

Vue3 中的路由守卫是通过 Vue Router 提供的导航守卫（Navigation Guards）来实现的，它允许你在路由发生变化前后执行自定义的逻辑。Vue Router 4（对应 Vue3）的路由守卫提供了更灵活的配置方式，其中包括全局守卫、路由独享守卫和组件内守卫。

要给路由添加参数，通常是在导航发生之前使用全局前置守卫（beforeEach）或路由独享守卫（beforeEnter）。你可以在守卫函数中根据需要添加参数到路由对象的 `params`、`query` 或者 `meta` 字段中。

以下是一个使用全局前置守卫给路由添加参数的示例：

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

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

router.beforeEach((to, from, next) => {
  // 假设你想为所有路由添加一个名为 'token' 的查询参数，其值为 '12345'
  const newTo = { ...to, query: { ...to.query, token: '12345' } };
  next(newTo); // 使用修改后的路由对象继续导航
});

export default router;

在这个例子中，我们通过扩展 `to` 对象来添加查询参数 `token`。然后使用 `next` 方法，传入我们修改后的路由对象来继续执行导航。