vue3在全局前置路由守卫如何获取路由参数

在 Vue 3 中，如果你想要在全局前置路由守卫（如 `beforeEach`）中获取路由参数，可以利用 `router.currentRoute` 对象，它包含了当前路由的信息，包括参数 (`params`)。下面是一个简单的例子：

import { useRouter } from 'vue-router';

// 创建一个 computed 属性来获取路由参数
const router = useRouter();

export default {
  setup() {
    const routeParams = computed(() => {
      return router.currentRoute.params;
    });

    // 在 beforeEach 守卫中使用 routeParams
    router.beforeEach((to, from, next) => {
      console.log('当前路由参数:', routeParams.value); // 打印参数
      // 在这里你可以处理参数，然后决定是否继续导航到下一个路由
      next();
    });

    return {
      queryParams: routeParams
    };
  }
}

在这个例子中，`queryParams` 变量就是你可以在任意组件中访问到的路由参数。当你需要它们的时候，可以直接调用这个计算属性。