Vue 路由传参问题：ID 无法传递到目标组件

本文档探讨了在 Vue 路由中传递 ID 参数时遇到的问题，分析了原因，并提供了解决方案。问题包括：从一个组件跳转到另一个组件，目标组件无法接收到 ID 参数，以及在目标组件中通过 route.params.versionId 获取到的 ID 值为 undefined。

问题描述

路由文件:

{
  path: "/version",
  component: Layout,
  redirect: "/version/",
  meta: {
    title: '版本',
    icon: 'version',
    hidden: false,
    roles: ["ADMIN"],
    keepAlive: true,
  },
  children: [
    {
      path: "version",
      component: () => import("@/views/version/version/index.vue"),
      name: "version",
      meta: {
        title: '版本管理',
        icon: 'version',
        hidden: false,
        roles: ["ADMIN"],
        keepAlive: true,
      },
    },
    {
      path: "publishVersion",
      component: () => import("@/views/version/publishVersion/index.vue"),
      name: "publishVersion",
      meta: {
        title: '发布版本',
        icon: 'publishVersion',
        hidden: false,
        roles: ["ADMIN"],
        keepAlive: true,
      },
    },
    {
      path: "VersionDetail",
      component: () => import("@/views/version/VersionDetail/index.vue"),
      name: "VersionDetail",
      meta: {
        title: '查看版本内容',
        icon: 'VersionDetail',
        hidden: false,
        roles: ["ADMIN"],
        keepAlive: true,
      },
    },
  ],
}

第一个文件：

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

问题：

为什么从文件1跳转到文件2之后，不能接收到id？
文件2要怎么获取到文件1传过来的id是多少？在文件2中的onMounted函数中，通过route.params.versionId来获取到id是undefined？

报错：

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

原因分析

**路由参数名称不一致：**在文件1中，跳转时使用的是 params 参数的名称为 VersionDetail，而在文件2中，获取路由参数时使用的是 params 参数的名称为 versionId。这两者应该保持一致。
错误的获取方式： 在文件2中获取路由参数时，使用了 route.params.id，但正确的参数名称应该是 route.params.versionId。
ID 变量未定义或空值： Uncaught (in promise) Error: id不能为空 错误提示表明 id 变量可能未定义或者为空。这可能是因为在文件2中使用了未定义的 id 变量，或者 id 的值为空。

解决方案

统一路由参数名称： 在文件1中将 params 参数的名称改为 versionId，如下所示：

router.push({
  name: "VersionDetail",
  params: { versionId: versionId },
});

使用正确的获取方式： 在文件2中获取路由参数时，应该使用 route.params.versionId，如下所示：

queryParams.id = route.params.versionId as string;

检查 ID 变量： 确保在使用 id 之前，先进行判空处理，或者检查变量是否正确定义和赋值。

代码示例

文件1：

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

文件2：

onMounted(() => {
  queryParams.id = route.params.versionId as string;
  console.log( '--------------- queryParams.id',queryParams.id)
  console.log( '--------------- route.params.id',route.params.versionId)
  console.log( '-跳进来了！初始收到的id是多少？？？？？？',route.params.id )
  
  if (queryParams.id) {
    handleQuery(queryParams.id);
  } else {
    // 处理 ID 为空的情况
    console.error('ID 为空，无法进行操作');
  }
});

总结

通过统一路由参数名称、使用正确的获取方式以及对 ID 变量进行判空处理，可以解决 Vue 路由传参时 ID 无法传递到目标组件的问题。同时，确保在使用 ID 变量之前进行必要的检查，可以避免出现 id 变量未定义或者为空的错误。