小编Nik*_*kOs的帖子

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

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

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

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

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

控制台输出:

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

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

我尝试过使用 props: true 和一切,我正在尝试将功能模式解决方案作为更复杂的示例

片段:

    <router-link :to="{ name: 'Home' }">Home</router-link>
    <router-view />
Run Code Online (Sandbox Code Playgroud)
    <router-link
      :to="{
        name: 'Repository',
        params: { repository: { one: '1', two: '2' } },
      }">click me</router-link>
Run Code Online (Sandbox Code Playgroud)

v1

    const routes: Array<RouteRecordRaw> = [
    {
      path: "/",
      name: "Home",
      component: Home …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-props vue-router4

1
推荐指数
1
解决办法
4600
查看次数

标签 统计

javascript ×1

vue-props ×1

vue-router4 ×1

vue.js ×1