Vue.js 路由参数传递问题：为什么无法获取 `id`？

在第二个文件中，handleQueryBYID 函数的参数名是versionId，但在调用函数时没有传入任何参数。因此，versionId 的值为undefined，而不是从route.params.id中获取的实际值。要解决这个问题，您可以将versionId作为参数传递给handleQueryBYID函数，或者直接使用route.params.id作为参数传递给handleQuery函数。以下是两种可能的解决方案：

解决方案1：将versionId作为参数传递给handleQueryBYID函数

第一个文件：

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

第二个文件：

onMounted(() => {
  queryParams.id = route.params.versionId as string;
  console.log('--------------- queryParams.id', queryParams.id)
  console.log('--------------- route.params.id', route.params.id)
  console.log('-跳进来了')

  handleQueryBYID(route.params.id);
});

function handleQueryBYID(versionId) {
  // loading.value = true;
  console.log('--------------- queryParams.versionId戴拿谢梦探索远方', route.params)
  queryParams.versionId = versionId;
  handleQuery(queryParams.versionId);
}

解决方案2：直接使用route.params.id作为参数传递给handleQuery函数

第一个文件：

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

第二个文件：

onMounted(() => {
  queryParams.id = route.params.versionId as string;
  console.log('--------------- queryParams.id', queryParams.id)
  console.log('--------------- route.params.id', route.params.id)
  console.log('-跳进来了')

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

function handleQuery(versionId) {
  loading.value = true;
  queryParams.versionId = 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;
    });
}

无论您选择哪种解决方案，都可以确保正确地获取到route.params.id的值并传递给相应的函数。