Vue3 使用 Vue Router 时，params 传参失效

作者：System 时间：2024年08月23日分类：所有,vue.js 字数：631

在Vue3中使用Vue Router时，如果你发现使用params传参不生效，可能是因为你没有正确地定义路由或者没有按照Vue Router的规则来使用params。

params是用来定义路由的一部分，它需要在路由定义时作为占位符定义，并且在导航到该路由时，需要提供相应的参数值。

例如，你有一个路由定义如下：




const routes = [
  {
    path: '/user/:id',
    component: User,
    name: 'user'
  },
  // ... 其他路由
];

你应该使用如下方式来传递params：




// 在Vue组件中
this.$router.push({ name: 'user', params: { id: '123' } });

如果你使用路由链接（nav），应该这样写：




<router-link :to="{ name: 'user', params: { id: '123' } }">User</router-link>

如果你没有按照这种方式来定义和使用params，那么你可能会遇到传参不生效的问题。确保你的路由定义和使用方式是一致的，并且你没有误用query参数来替代params。