Vuetify - 将道具传递给由 router-link 创建的标签

Posted 2023-02-23

【中文标题】Vuetify - 将道具传递给由 router-link 创建的标签

【英文标题】：Vuetify - Passing props to the tag created by router-link

【发布时间】：2020-12-10 03:36:35

【问题描述】：

当使用tag覆盖用于创建链接的标签时，如何将props传递给创建的Vue组件？

在这里您可以看到我在v-list 内使用了v-list-item 标记（未显示）。这按预期工作，v-list-item 被 Vue 解析为 Vuetify 组件。但是，我不知道如何将道具传递给v-list-item

<router-link
    :to="name: 'home'"
    tag="v-list-item"
>
  <v-list-item-action>
    <v-icon>mdi-home</v-icon>
  </v-list-item-action>
  <v-list-item-content>
    <v-list-item-title>
      Home
    </v-list-item-title>
  </v-list-item-content>
</router-link>

我试过了

<router-link
    :to="name: 'home'"
    tag="v-list-item"
    :disabled="isDisabled"
>

...但它不起作用。

【问题讨论】：

你试过我的答案了吗？

@BoussadjraBrahim 是的。我当时投了赞成票，但它不允许我们接受它。我现在就这样做。

【参考方案1】：

您可以直接使用 v-list-item 并通过传递路径名添加 to 属性：

<v-list-item     :to="name: 'home'">

在official API 中，从下拉列表中选择v-list-item，然后转到带有描述的to 属性：

表示链接的目标路由。您可以在 vue-router 文档中找到有关 to 属性的更多信息。