面包屑

v-breadcrumbs 组件是页面的导航助手。 它可以接受 Material Icons 图标或文本字符作为分隔符。 可以将对象数组传递给组件的 items 属性。 另外，还可以使用 v-breadcrumbs-item 或其他自定义标记来更好地控制面包屑。

默认情况下，v-breadcrumbs 将禁用所有到当前页面的嵌套路径。 您可以通过在 items 数组中的每个适用面包屑上使用 exact: true 来防止这种行为。

用例

默认情况下，面包屑使用文本分隔符。它可以是任何字符串。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

变大

大的面包屑具有较大的字体。

template script

<template>
  <div>
    <v-breadcrumbs :items="items"></v-breadcrumbs>
    <v-breadcrumbs :items="items" large></v-breadcrumbs>
  </div>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          text: 'Dashboard',
          disabled: false,
          href: 'breadcrumbs_dashboard',
        },
        {
          text: 'Link 1',
          disabled: false,
          href: 'breadcrumbs_link_1',
        },
        {
          text: 'Link 2',
          disabled: true,
          href: 'breadcrumbs_link_2',
        },
      ],
    }),
  }
</script>

自定义分隔符

面包屑分隔符可以用 divider 属性设置。

template script

<template>
  <div>
    <v-breadcrumbs :items="items" divider="-"></v-breadcrumbs>
    <v-breadcrumbs :items="items" divider="."></v-breadcrumbs>
  </div>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          text: 'Dashboard',
          disabled: false,
          href: 'breadcrumbs_dashboard',
        },
        {
          text: 'Link 1',
          disabled: false,
          href: 'breadcrumbs_link_1',
        },
        {
          text: 'Link 2',
          disabled: true,
          href: 'breadcrumbs_link_2',
        },
      ],
    }),
  }
</script>

Vuetify Fundamentals Cheat Sheet

Level-up your Vuetify skills with our Fundamentals Cheat Sheet

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-fundamentals-cheat-sheet?ref=vuetifyjs.com)

图标分隔符

对于图标变体，面包屑可以使 aterial Design Icons中的任何图标。

template script

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

<script>
  export default {
    data: () => ({
      items: [
        {
          text: 'Dashboard',
          disabled: false,
          href: 'breadcrumbs_dashboard',
        },
        {
          text: 'Link 1',
          disabled: false,
          href: 'breadcrumbs_link_1',
        },
        {
          text: 'Link 2',
          disabled: true,
          href: 'breadcrumbs_link_2',
        },
      ],
    }),
  }
</script>

项目插槽

您可以使用 item 插槽自定义每个面包屑。

template script

<template>
  <v-breadcrumbs :items="items">
    <template v-slot:item="{ item }">
      <v-breadcrumbs-item
        :href="item.href"
        :disabled="item.disabled"
      >
        {{ item.text.toUpperCase() }}
      </v-breadcrumbs-item>
    </template>
  </v-breadcrumbs>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          text: 'Dashboard',
          disabled: false,
          href: 'breadcrumbs_dashboard',
        },
        {
          text: 'Link 1',
          disabled: false,
          href: 'breadcrumbs_link_1',
        },
        {
          text: 'Link 2',
          disabled: true,
          href: 'breadcrumbs_link_2',
        },
      ],
    }),
  }
</script>