Vue Router 4参数传递是否正确？请求排查失效问题

核心原因：使用path跳转时params参数会被Vue Router忽略 #

Vue Router 4的规则明确：当通过path指定跳转路径时，配置的params参数不会被传递到目标路由。只有通过路由的name属性配合params，或者使用query参数，才能正确传递数据。

具体解决方案 #

方案1：改用路由name配合params传递（内存级参数，刷新会丢失）

修改跳转代码：

this.$router.push({ name: "Clients", params: { tabValue: 'legalEntities' } });

组件内的getTabValue方法无需修改，但注意：这种方式的params不会出现在URL中，页面刷新后参数会丢失。

方案2：改用query参数传递（URL可见，刷新不丢失，推荐）

修改跳转代码：

this.$router.push({ path: "/clients", query: { tabValue: 'legalEntities' } });

同步修改组件内的参数获取逻辑：

getTabValue() {
    this.tab = this.$route.query.tabValue || 'persons';
}

方案3：定义动态路由参数（参数嵌入URL，刷新不丢失）

如果希望参数出现在URL路径中，先修改路由声明：

{
    path: "/clients/:tabValue?", // 问号表示该参数可选
    name: "Clients",
    component: () => import(/* webpackChunkName: "clients" */'@/components/Clients/Clients'),
    meta: {
      requiresAuth: true,
    },
}

跳转时可以选择两种方式：

// 方式A：直接拼接路径
this.$router.push({ path: "/clients/legalEntities" });

// 方式B：用name+params
this.$router.push({ name: "Clients", params: { tabValue: 'legalEntities' } });

组件内的getTabValue方法无需修改。

额外验证点 #

确认created钩子中确实调用了getTabValue方法，可在方法内添加console.log(this.$route.params)或console.log(this.$route.query)，查看实际获取到的参数值，排查是否存在生命周期执行顺序问题。

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