在Vue router-link中使用Object作为参数的路径问题

Posted 2023-02-23

【中文标题】在Vue router-link中使用Object作为参数的路径问题

【英文标题】：Path problem using Object as parameters in Vue router-link

【发布时间】：2019-07-29 19:52:45

【问题描述】：

我已经创建了一个

<router-link :to=" name: 'casa', params: casa: item ,codCasa:item.cod_Casa "> item.cod_casa </router-link>

但是现在路径有问题。不能有明确的网址。

item 是一个对象，然后 url 是http://localhost:8080/casa/%5Bobject%20Object%5D

在我的路线中

      path: "/casa/:casa",
      name: "casa",

      component: () =>
          import(/* webpackChunkName: "about" */ "./components/Casa/Casa.vue"),
      props: true
    ,

如果我使用路径："/casa/:codCasa"，则表示未定义 codCasa。 提前致谢。

【参考方案1】：

您应该只传递codCasa 的路径并获取组件内的对象。

Vue Roter 允许props，所以我们可以这样做：

    
      path: "/casa/:casa",
      name: "casa",

      component: () =>
          import(/* webpackChunkName: "about" */ "./components/Casa/Casa.vue"),
      props:  casa:  id: 1, name: 'Casa 1'  
    ,

其中casa被定义为组件内部的prop

但看起来casa 对象是动态的，这就是为什么我推荐第一种方式，只使用路径中的 ID 并在组件中等待名为 codCasa 的道具。注意道具使用的类型。

如果您确实需要传递整个对象并且不想从组件内部的后端获取它，请考虑仅使用子组件而不使用新路由。

【讨论】：

casa 是动态的。我不想再次获取该对象...并且

问题只是网址...我有我需要的所有数据

对，我就是这么说的。我们通常不会在路径参数中传递对象，如果您确实需要传递整个对象并且不想从组件内部的后端获取它，请考虑仅使用没有新路由的子组件。