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

【问题标题】：Path problem using Object as parameters in Vue router-link在Vue router-link中使用Object作为参数的路径问题
【发布时间】：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。提前致谢。

【问题讨论】：

标签： vue.js vue-component vue-router vuetify.js

【解决方案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 是动态的。我不想再次获取该对象...并且
问题只是网址...我有我需要的所有数据
对，我就是这么说的。我们通常不会在路径参数中传递对象，如果您确实需要传递整个对象并且不想从组件内部的后端获取它，请考虑仅使用没有新路由的子组件。