1

我浏览了这个有点相关的vue-router@4.05 对象参数。在该线程中提到了这个https://github.com/vuejs/vue-router-next/issues/494，但我仍然很困惑。

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

笔 1成功传递了在路线定义中定义的对象。

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

控制台输出：

[Vue 警告]：无效的道具：道具“存储库”的类型检查失败。预期的对象，得到具有>值“[对象对象]”的字符串。at <Repository repository="[object Object]" onVnodeUnmounted=fn ref=Ref > at at at at

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

我已经尝试过 props: 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 };
      }
    }];
4

2 回答 2

4

您的代码中发生了什么：

正如您在控制台中的警告消息中看到的那样，您实际上是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>

这样，您将能够按意图传递 Object。

于 2021-06-21T13:18:47.560 回答
1

Vue-router 从未支持传递任意数据（未在路由定义中定义为params ），并且从未按预期工作。检查我对您链接的问题的回答

您的示例v1之所以有效，是因为在路由函数中repository定义的值props覆盖了repository从router-link通过的值params（repository: "[object Object]"正如您在控制台中看到的那样）

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

不。

  1. 您不能使用$router.pushor传递任何对象router-link（即使它在 Vue-router 3 中“有点工作” - 再次，请参阅我的链接答案）

  2. 您可以将props路由定义定义为对象或返回对象的函数，并且它的属性将通过传递给组件的道具而无需任何编码或任何东西。但这与使用$router.pushor非常不同，router-link因为数据不是来自源路由而是来自路由器本身......

于 2021-04-20T15:23:11.570 回答