Vue3路由进阶实战：深度解析参数传递与导航守卫核心技术

一、路由参数传递的进阶应用技巧

1.1 路由配置与参数验证

// router/index.js
{
   
   
  path: '/user/:userId(\\d+)', // 使用正则表达式限制只匹配数字
  name: 'UserDetail',
  component: () => import('../views/UserDetail.vue'),
  props: true // 启用props传参模式
}

技术要点：

• 通过正则表达式约束参数格式，提升参数安全性 （如\\d+限制为数字）
• 使用路由懒加载提升性能
• 启用props模式实现组件解耦

1.2 组件参数接收的三种方式

<!-- UserDetail.vue -->
<script setup>
// 方式1：通过useRoute获取
const route = useRoute()
console.log(route.params.userId)

// 方式2：通过props接收（推荐）
const props = defineProps({
   
   
  userId: {
   
   
    type: [String, Number],
    required: true
  }
})

// 方式3：watch参数变化
watch(() => route.params.userId, (newVal) => {
   
   
  // 处理参数变化逻辑
})
</script>

---

二、查询参数：实现复杂数据传递

2.1 查询参数传递技巧

使用query对象进行非敏感数据传递，支持对象嵌套：

// 编程式导航
router.push({
   
   
  path: '/search',
  query: {
   
   
    keywords: 'vue3',
    filters: {
   
   
      sort: