具有<路由器链接:to>的Vue-router4传递对象不会传递动态数据

Question

我看过这个vue-路由器@4.05对象参数，它有一定的相关性。在这个线程中提到了这个https://github.com/vuejs/vue-router-next/issues/494，但我仍然感到困惑。

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

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

笔2试图传递一个动态对象，而不是实际的对象，而是得到一个带有对象对象的字符串，如github问题中所描述的那样。

控制台输出：

Vue警告:无效的支柱:类型检查失败的道具“储存库”。预期对象，得到具有>值“Object Object”的字符串。at . at

所以，如果我搞清楚了，最终你不能传递一个动态对象，因为它被解析了，但是你可以传递一个静态对象？

我尝试过道具: true和所有东西，我正在尝试功能模式解决方案，作为一个更复杂的例子。

片段：

    <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>

v1

    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" } };
      }
    }];

v2

    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 };
      }
    }];

Answer 1

Vue路由器从来不支持传递任意数据(在路由定义中未定义为参数)，也从未像预期的那样工作。检查我的关于你所联系的问题的答案

您的示例v1之所以有效，只是因为在路由的props函数中定义的repository值覆盖了从router-link传递到params的repository值(如您在控制台中看到的repository: "[object Object]" )。

所以，如果我搞清楚了，最终你不能传递一个动态对象，因为它被解析了，但是你可以传递一个静态对象？

不是的。

1. 您不能使用$router.push或router-link传递任何对象(即使它在Vue-路由器3中是“工作的”，请参见我的链接答案)
2. 您可以在路由定义中将props定义为对象或返回对象的函数，它的属性将通过传递到组件的道具而无需任何编码或任何内容。但这与使用$router.push或router-link有很大不同，因为数据不是来自源路由，而是来自路由器本身。

Answer 2

您的代码中发生了什么：

正如您在控制台中的警告消息中看到的那样，您实际上是从道具获得String而不是Object。

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

许多人建议使用Vuex并将全局状态设置为解决方案，我认为这不是您想要的解决方案。

解决方案

为了避免将[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>

这样，您就可以以有意传递对象的方式传递对象。