Question

我创建了一个

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

但是现在a路径有问题。无法提供清晰的网址。

item 是一个对象，然后网址是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。预先感谢。

Answer 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被定义为组件内部的道具

但是看起来对象casa是动态的，这就是为什么我建议采用第一种方法，即仅在路径中使用ID并在组件中等待名为codCasa的prop。请注意道具使用的类型。

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

在Vue路由器链接中使用对象作为参数的路径问题

1 个答案: