Vue Router 路由传参：如何获取路由跳转时传递的 ID？

在 Vue Router 中，我们可以通过 router.push 方法传递参数，并在目标组件中使用 route.params 获取这些参数。

示例场景：

假设我们有两个文件：

文件 1：

// 预览----去详情
function toDetail(versionId?: string) {
    console.log('~scope.row.versionId~~~~~~~~~~~',versionId)
  router.push({
    name: "VersionDetail",
    params: { VersionDetail: 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.id',route.params.VersionDetail)
  console.log( '-跳进来了！初始收到的id是多少？？？？？？',route.params.VersionDetail)
  
  handleQuery(route.params.VersionDetail);
});

问题：

在文件 2 的 onMounted 函数中，通过 route.params.versionId 获取传过来的 ID 始终为 undefined。

原因：

在文件 1 中，通过 router.push 方法跳转到文件 2 时，使用的参数名是 VersionDetail，而不是 versionId。所以在文件 2 中需要使用 route.params.VersionDetail 来获取传过来的 ID 值。

解决方案：

修改文件 2 的代码如下：

let versionId = 0;

onMounted(() => {
  queryParams.id = route.params.VersionDetail as string;
  console.log( '--------------- queryParams.id',queryParams.id)
  console.log( '--------------- route.params.id',route.params.VersionDetail)
  console.log( '-跳进来了！初始收到的id是多少？？？？？？',route.params.VersionDetail)
  
  handleQuery(route.params.VersionDetail);
});

总结：

通过 router.push 传递参数时，确保参数名与在目标组件中获取参数的名称一致，才能正确获取到传递的参数值。