Vue.js 路由传参：解决参数无法传递问题

问题描述

在使用 Vue.js 进行路由跳转时，有时会遇到参数无法传递到目标组件的问题。这通常是由于参数名称不一致或传参方式错误导致的。

以下示例演示了这个问题：

第一个文件：

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

第二个文件：

function handleQuery(versionId) {
  loading.value = true;
  queryParams.versionId = versionId;
  console.log( '--------------- queryParams.versionId戴拿谢梦探索远方', 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;
    });
}
onMounted(() => {
  queryParams.id = route.params.versionId as string;
  console.log( '--------------- queryParams.id',queryParams.id)
  console.log( '--------------- route.params.id',route.params.versionId)
  console.log( '-跳进来了！' )

  handleQuery(route.params.versionId);
});

问题： 为什么从文件1跳转到文件2 之后，不能接收到id?

报错： Uncaught (in promise) Error: id不能为空

原因： 问题出在文件2的handleQuery函数中，参数名为versionId，而在调用handleQuery的地方，传入的参数名为id。

解决方法

为了解决这个问题，需要将调用handleQuery函数时的参数名改为versionId，如下所示：

// 第二个文件
onMounted(() => {
  queryParams.id = route.params.versionId as string;
  console.log( '--------------- queryParams.id',queryParams.id)
  console.log( '--------------- route.params.id',route.params.versionId)
  console.log( '-跳进来了！' )

  handleQuery(route.params.id); // 将参数名改为versionId
});

总结

通过将参数名称保持一致，确保了参数能够成功传递到目标组件，从而解决路由传参问题。在进行路由传参时，需要仔细检查参数名称是否一致，以及传参方式是否正确。