Vue 3 Router嵌套子路由含参数时出现警告，如何消除？

定义了如下嵌套路由：

routes: [
  {
    path: 'tasks',
    children: [
      {
        path: ':id',
        children: [
          {
            path: '',
            name: 'tasks.show',
            components: {
              default: () => import('../views/Tasks/ShowView.vue')
            }
          }
        ]
      }
    ]
  }
]

在组件中通过const taskId = route.params.id能正常获取id参数，但控制台出现警告：

[Vue Router warn]: Discarded invalid param(s) "taskId" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.

已知不应使用未在路径中定义的参数，但id参数已在父层级路由中定义，请问如何消除该警告？

核心原因 #

警告里的taskId是你在导航到tasks.show时传递了未在路由定义中出现的参数名——路由里定义的参数是:id，但你导航时传了taskId，所以被判定为无效参数。

具体修复步骤 #

• 检查所有导航到tasks.show的代码，确保传递的参数名是id而非taskId：

  // 正确写法
  router.push({ name: 'tasks.show', params: { id: 123 } })
  

• 如果用<router-link>导航，同样要保证参数名匹配：

  <!-- 正确写法 -->
  <router-link :to="{ name: 'tasks.show', params: { id: task.id } }">查看任务</router-link>
  

• 排查全局导航守卫、路由元信息等其他位置，确认没有意外传递taskId这个未定义的参数。

Vue Router会校验当前匹配的路由及其所有父路由中定义的参数，只要传递的参数名不在这些定义里就会触发警告，和参数所在的嵌套层级无关，只要参数名和路由里的:id对应上就能解决问题。

内容的提问来源于stack exchange，提问作者loau