Vue Router 路由传参问题：使用 params 传递参数，接收时获取不到值

问题描述

在使用 Vue Router 进行路由跳转并传递参数时，如果在第一个文件（文件1）中使用 params 对象传递参数，而在第二个文件（文件2）中使用不同的参数名来接收参数，会导致文件2无法获取到正确的参数值。

错误示例

文件1：

// 预览----去详情
function toDetail(versionId?: string) {
  console.log('~scope.row.versionId~~~~~~~~~~~', versionId)
  router.push({
    name: "VersionDetail",
    params: { id: versionId },
    // query: { newTitle: "版本详情[' + versionId + ']" },
  });
}

文件2：

let versionId = 0;

onMounted(() => {
  queryParams.id = route.params.VersionDetail as string;

  console.log('--------------- queryParams.id', queryParams.id)
  console.log('--------------- route.params.versionId', route.params.versionId)
  console.log('-跳进来了！初始收到的id是多少？？？？？？', route.params.id)
  console.log('-跳进来了！初始收到的id是多少？？？？？？', route.params.VersionDetail)
  
  handleQuery(route.params.VersionDetail);
});
function handleQuery() {
  loading.value = true;
  queryParams.versionId = versionId;
  console.log('--------------- 进入了handleQuery查询的阶段~~---', queryParams.versionId);

  getVersionForm(queryParams)
      .then((data: any) => {
          console.log('data=====', data);
          Object.assign(formData, data);
          //   refundInfo.orderSkus.push(...data.data.orderSkus);

          // total.value = data.total;
      })
      .finally(() => {
          loading.value = false;
      });
}

解决方法

为了解决这个问题，可以将参数名统一，并使用 query 对象传递参数。

修改后的文件1：

// 预览----去详情
function toDetail(versionId?: string) {
  router.push({
    name: "VersionDetail",
    query: { versionId: versionId },
  });
}

修改后的文件2：

queryParams.id = route.query.versionId as string;
// 其他代码...

总结

在使用 Vue Router 传递参数时，要注意参数名的一致性。如果使用 params 对象传递参数，需要确保在接收参数时使用相同的参数名。如果使用 query 对象传递参数，则可以在接收参数时使用 route.query 获取参数值。

通过以上步骤，就可以解决路由传参问题，确保文件2能够正确获取到文件1传递过来的参数值。

Vue Router 路由传参问题：使用 params 传递参数，接收时获取不到值