Vue3+Vuetify路由跳转报错：目标路由无需参数却提示缺失personId

问题场景 #

使用最新版Vue3、Vue Router和Vuetify，当前处于路由/a/:accountId/people/:personId/emails时，跳转至无需personId参数的/a/:accountId/people/路由，会触发错误提示「Missing required param "personId"」。但手动传入personId参数、或直接调用router.push跳转时均正常，且同项目Vue2版本无此问题。

路由配置 #

export default {
  path: '/a/:accountId/',
  props: true,
  component: AccountLayout,
  children: [
    {
      path: 'people',
      name: 'app-account-people',
      component: PeopleList,
    },
    {
      path: 'people/:personId',
      props: true,
      component: PeopleDetailLayout,
      children: [
        {
          path: 'emails',
          props: true,
          name: 'app-account-person-emails',
          component: PeopleDetailEmails,
        },
      ],
    },
  ],
}

布局组件示例 #

<div>
  <v-card>
   <v-tabs color="primary">
     <v-tab
       variant="text"
       icon="mdi-chart-box-outline"
       :to="{
         name: 'app-account-person-emails',
       }"
        exact
        link
     >
        ABUTTON
     </v-tab>
   </v-tabs>
     </v-card>
     <v-divider />
       <div class="pa-4 pt-1">
        {{ person }}
        <router-view />
       </div>
</div>

报错原因 #

1. Vue Router版本差异：Vue Router 4（Vue3配套）默认会继承当前路由的所有params到新路由，而Vue Router 3（Vue2配套）无此严格继承逻辑。跳转时如果只指定路由名称，Vue Router 4会自动带上当前路由的accountId和personId，但目标路由app-account-people并不需要personId，被误判为缺少必填参数（当前路由的personId是必填项）。
2. Vuetify组件逻辑差异：v-tab的:to属性内部会做路由匹配预校验，继承参数后触发了必填参数检查；而直接调用router.push时，Vue Router会正确识别目标路由的参数需求，自动忽略多余参数。

解决方案 #

方案1：显式指定目标路由所需参数 #

在:to中只传入目标路由需要的accountId，不携带personId，明确参数范围：

<v-tab
  variant="text"
  icon="mdi-chart-box-outline"
  :to="{
    name: 'app-account-people',
    params: { accountId: props.accountId }
  }"
  exact
  link
>
  人员列表
</v-tab>

方案2：用router.push替代:to绑定 #

通过@click事件手动调用路由跳转，绕过v-tab的预校验逻辑：

<v-tab
  variant="text"
  icon="mdi-chart-box-outline"
  @click="goToPeopleList"
  exact
  link
>
  人员列表
</v-tab>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps(['accountId'])

function goToPeopleList() {
  router.push({ name: 'app-account-people' })
}
</script>

方案3：禁用参数继承 #

在跳转配置中添加inherit: false，阻止继承当前路由的所有参数，需手动传入目标路由所需参数：

<v-tab
  variant="text"
  icon="mdi-chart-box-outline"
  :to="{
    name: 'app-account-people',
    inherit: false,
    params: { accountId: props.accountId }
  }"
  exact
  link
>
  人员列表
</v-tab>

补充说明 #

Vue Router 4对路由参数的校验更严格，旨在避免意外的参数传递导致路由异常。升级到Vue3后，需适配新的路由参数处理规则，避免依赖旧版本的宽松逻辑。

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