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

Question

我想创建一个应用程序，它使用 v-for 动态呈现链接，并使用每个链接打开不同的组件。 我知道如何渲染 <router-link>本身，但我不知道如何动态更改to=""的目标url Prop 。

Answer 1

如果你的数组看起来像这样:

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>