Vue 路由传参：使用 query 属性传递版本 ID

路由文件：

{
  path: "/version",
  component: Layout,
  redirect: "/version/",
  meta: {
    title: "版本",
    icon: "version",
    hidden: false,
    roles: ["ADMIN"],
    keepAlive: true
  },
  children: [
    {
      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) {
  router.push({
    name: "VersionDetail",
    query: { VersionDetail: versionId },
    params: { newTitle: '版本详情[' + versionId + ']' }
  });
}

第二个文件：

import { onMounted, useRouter } from "vue";

export default {
  setup() {
    const router = useRouter();

    onMounted(() => {
      const versionDetail = router.currentRoute.value.query.VersionDetail as string;

      handleQuery(versionDetail);
    });
  }
};

**问题：**第二个文件无法接收到第一个文件传过来的版本 ID。

原因： 在路由配置中，params应该是一个对象，而不是一个字符串。第一个文件将versionId作为字符串传递，导致第二个文件无法获取到它。

解决方案： 将params修改为query，并将VersionDetail作为一个参数传递。

修改后的代码：

第一个文件：

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

第二个文件：

import { onMounted, useRouter } from "vue";

export default {
  setup() {
    const router = useRouter();

    onMounted(() => {
      const versionDetail = router.currentRoute.value.query.VersionDetail as string;

      handleQuery(versionDetail);
    });
  }
};

这样，第二个文件就可以正确地接收到第一个文件传递的版本 ID 了。

注意：

params 用于传递路径参数，而 query 用于传递查询参数。
在第二个文件中，使用 router.currentRoute.value.query.VersionDetail 获取查询参数的值。
as string 用于将 VersionDetail 转换为字符串类型。