证明面包屑作用域插槽

Question

我正在尝试将面包屑整合到我的vuetify应用程序中，但这是我的代码：

<v-breadcrumbs divider=">">
    <v-breadcrumbs-item
        v-for="breadcrumb in breadcrumbs"
        exact
        :to="breadcrumb.to">
        {{ breadcrumb.text }}
    </v-breadcrumbs-item>
</v-breadcrumbs>

然后我在控制台中收到这个警告。我不太确定这是什么意思..

default slot' is deprecated, use ':items and scoped slot "item"' instead

如果我尝试vuetify docs：<v-breadcrumbs :items="items">中的默认模板，它只允许href，而不是我需要的:to。

谁能帮帮我。

Answer 1

似乎Veutify现在提供了一个item作用域的插槽，可以用来定制面包屑。看一下他们的示例here，我认为您需要做的是如下所示。

<v-breadcrumbs :items="breadcrumbs" divider=">">
    <v-breadcrumbs-item
        slot="item"
        slot-scope="{ item }"
        exact
        :to="item.to">
        {{ item.text }}
    </v-breadcrumbs-item>
</v-breadcrumbs>

Answer 2

另一种方法是使用带有单击事件的方法

<template>
  <v-breadcrumbs divider=">">
    <v-breadcrumbs-item
        v-for="breadcrumb in breadcrumbs"
        exact
        @click="goTo(breadcrumb.to)">
        {{ breadcrumb.text }}
    </v-breadcrumbs-item>
  </v-breadcrumbs>
</template>

<script>
  export default {
    methods: {
      goTo (payload) {
        this.$router.push(payload)
      }
    }
  }
</script>

Answer 3

你可以使用下面的代码，与上面的解决方案相比，它要简单得多：

<template>
  <v-breadcrumbs :items="breadcrumbs">
    <template v-slot:divider>
      <v-icon>mdi-menu-right</v-icon>
    </template>
  </v-breadcrumbs>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        {
          nuxt: true,
          activeClass: "",
          text: "Page A",
          to: { name: "page-a" },
        },
        {
          disabled: true,
          text: "Page B",
        },
      ],
    };
  },
};
</script>