如何解决Vue-router4 - 使用 <router-link :to> 传递对象不会传递动态数据

我经历了这个vue-router@4.05 object params，这有点相关。那个帖子中提到了这个 https://github.com/vuejs/vue-router-next/issues/494，但我仍然很困惑。

我还尝试使用 路由器链接 组件的 :to 属性传递一些数据。我做了两支笔来展示这个问题：

Pen 1 传递在路由定义中定义的对象 - 成功。

Pen 2 正在尝试传递一个动态对象，而不是实际对象，它获取了一个带有 [Object object] 的字符串，如 github 问题中所述。

控制台输出：

[Vue 警告]：无效的道具：道具“存储库”的类型检查失败。预期的对象，得到的字符串 > 值为“[object Object]”。在在在在

所以，如果我明白这一点，最终你不能传递动态对象，因为它被解析，但你可以传递静态对象？

我已经尝试过 props: true 和所有东西，我正在尝试将 function mode 解决方案作为一个更复杂的例子

片段：

    <router-link :to="{ name: 'Home' }">Home</router-link>
    <router-view />

    <router-link
      :to="{
        name: 'Repository',params: { repository: { one: '1',two: '2' } },}">click me</router-link>

    const routes: Array<RouteRecordRaw> = [
    {
      path: "/",name: "Home",component: Home
    },{
      path: "/repo/",name: "Repository",component: () => import("../components/Repository.vue"),props: (route) => {
        console.log("entered route");
        console.log(route);
        return { ...route.params,repository: { one: "1",two: "2" } };
      }
    }];

    const routes: Array<RouteRecordRaw> = [
    {
      path: "/",props: (route) => {
        console.log("entered route");
        console.log(route);
        return { ...route.params };
      }
    }];

解决方法

Vue-router 从未支持传递任意数据（未在路由定义中定义为 params）并且从未按预期工作。检查我的 answer on the question you linked

您的示例 v1 仅起作用，因为在路由的 repository 函数中定义的 props 的值覆盖了从 repository 到 {{ 传递的 router-link 值1}}（这是 params，正如您在控制台中看到的那样）

所以，如果我明白这一点，最终你不能传递动态对象，因为它被解析，但你可以传递静态对象？

没有

您不能使用 repository: "[object Object]" 或 $router.push 传递任何对象（即使它在 Vue-router 3 中“有点工作” - 再次，请参阅我的链接答案）
您可以在路由定义上将 router-link 定义为一个对象或一个函数返回对象，它的属性将被传递给您组件的 props，无需任何编码或任何东西。但这与使用 props 或 $router.push 非常不同，因为数据不是来自源路由而是来自路由器本身...

您的代码中发生了什么：

正如您在控制台的警告消息中看到的，您实际上是从 prop 中获取 String 而不是 Object：

[Vue 警告]：无效的道具：道具“存储库”的类型检查失败。预期对象，得到字符串

许多人建议使用 Vuex 并设置全局状态作为解决方案，我相信这不是您要寻找的。p>

解决方案

为了避免将 [Object,Object] 作为传递的数据，您可以做的是将原始页面中的对象字符串化，然后在目标页面上再次将传递的字符串解析为对象。

原始页面/路由器组件

 <router-link
      :to="{
        name: 'Your_Route_Name',params: { repository: JSON.stringify({ one: '1',two: '2' }) },}">click me</router-link>

在您的目标路由器组件中

<template>
    <div>
        {{ JSON.parse(repository) }}
    </div>
</template>

<script>
export default {
    props: ["repository"],setup(props) {
        //Log the parsed object in console. Example shown with Vue3 Composition API but you get the idea.
        console.log(JSON.parse(props.customer));
    }
}
</script>

这样，您就可以按意图传递对象。如果这是您正在寻找的内容，请选择我作为最佳答案。谢谢！