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

在 Vue3 中，你可以利用全局路由守卫（`router.beforeEach` 或 `router.appProtect`）在每个导航之前获取路由参数。这通常是在需要对进入的每个页面做一些验证、授权或数据预加载操作的时候使用。

下面是一个简单的例子，展示如何在 `beforeEach` 守卫中获取路由参数：

import { useRoute } from 'vue-router'

const router = new VueRouter({
  // ... your router configuration
})

router.beforeEach((to, from, next) => {
  const route = useRoute() // 获取当前路由信息
  const param = route.params.yourParamName // 路由参数名替换为你实际需要的

  // 这里你可以根据param做进一步处理
  console.log('Route param:', param)

  if (/* 验证或条件判断 */) {
    next() // 继续前往目标路由
  } else {
    next({ path: '/redirect', query: { error: '权限不足' } }) // 如果不符合条件，则重定向到其他路径
  }
})

在这个例子中，`yourParamName` 替换为你想获取的实际路由参数名称。当满足条件时，程序会继续执行下一个生命周期钩子；如果不满足，可以修改路由目标或者执行其他操作。