Vue3迁移后Vue Router参数无法作为Props传递问题求助

核心问题出在路由配置未在path中声明params对应的占位符，导致Vue Router无法捕获params参数，进而无法通过props传递给组件。

修复步骤 #

1. 修改路由配置，添加path占位符
   你的detail路由需要在path中明确:id占位符，才能让Vue Router识别并捕获params中的id参数。修改后的路由配置示例：

   // main.js 中的路由数组
   const routes = [
     // ...其他路由
     {
       name: 'detail',
       path: '/detail/:id', // 关键：添加:id占位符
       component: Detail,
       props: true // 保持此配置即可，或使用props函数
     }
   ]
   

   如果使用props函数方式，配置如下（效果一致）：

   {
     name: 'detail',
     path: '/detail/:id',
     component: Detail,
     props: (route) => ({ id: route.params.id })
   }
   

2. 确认组件Props声明正确
   在Detail.vue中确保正确声明id props：

   <script setup>
   // 使用<script setup>的方式
   const props = defineProps(['id'])
   console.log('id:', props.id) // 现在会输出123
   </script>
   

原因说明 #

Vue Router 4（适配Vue3）对params参数的处理比Vue2更严格：只有当路由path中声明了对应的占位符时，params中的参数才会被路由系统捕获并传递。如果path中没有占位符，即使通过router-link传递了params，这些参数也不会被保留，自然无法通过props传递给组件。

内容的提问来源于stack exchange，提问作者F.Dilmahomed