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

【问题标题】：Vuetify - Passing props to the tag created by router-linkVuetify - 将道具传递给由 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 是的。我当时投了赞成票，但它不允许我们接受它。我现在就这样做。

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

【解决方案1】：

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

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

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

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

【讨论】：