使用v-for渲染VUE路由器链接

Question

我想创建一个应用程序，该应用程序使用v-for动态呈现链接，并为每个链接打开不同的组件。 我知道如何呈现to=""本身，但我不知道如何动态更改{{1}}道具的目标网址。

Answer 1

您可以使用:to="{path: '/to'}"中的绑定<router-link>来实现。

Answer 2

如果您的数组看起来像这样：

components: [
  {
    path: "/a",
    name: "Component A"
  },
  {
    path: "/b",
    name: "Component B"
  }
]

您可以在v-for中使用它，例如：

<router-link
  v-for="(comp, i) in components"
  :key="i"
  :to="{ path: comp.path }"
>
  {{comp.name}}
</router-link>