Vue3面包屑（Breadcrumb）

置顶 theMuseCatcher

已于 2025-02-28 11:18:57 修改

阅读量2.6k

点赞数 1

于 2023-03-08 15:03:08 首次发布

本文链接：https://blog.youkuaiyun.com/Dandrose/article/details/129403707

版权

Vue3 同时被 3 个专栏收录

88 篇文章

订阅专栏

TypeScript

87 篇文章

订阅专栏

Less

77 篇文章

订阅专栏

本文介绍了一个Vue3面包屑（Breadcrumb）组件的实现方式，该组件支持多种自定义设置，如路由数组、面包屑样式、分隔符等，并展示了不同场景下的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2面包屑（Breadcrumb）

可自定义设置以下属性：

router 的路由数组（routes），类型：Array<{name: string, path?: string, query?: { [propName: string]: any } }>，默认 []
设置面包屑类名（breadcrumbClass），类型：string，默认 undefined
设置面包屑样式（breadcrumbStyle），类型：CSSProperties，默认 {}
设置文本最大显示宽度，超出后显示省略号（maxWidth），类型：string | number，单位 px，默认 '100%'
自定义分隔符（separator），类型：string | slot，默认 undefined，默认使用 '>' 分隔
设置分隔符样式（separatorStyle），类型：CSSProperties，默认 {}
如何打开目标URL，当前窗口或新窗口（target），类型：'_self' | '_blank'，默认 '_self'

效果如下图：

在线预览

①创建面包屑组件Breadcrumb.vue：

<script setup lang="ts">
import { computed } from 'vue'
import type { CSSProperties } from 'vue'
export interface Query {
  [propName: string]: any // 添加一个字符串索引签名，用于包含带有任意数量的其他属性
}
export interface Route {
  name: string // 路由名称
  path?: string // 路由地址
  query?: Query // 路由查询参数
}
export interface Props {
  routes?: Route[] // router 路由数组
  breadcrumbClass?: string // 设置面包屑类名
  breadcrumbStyle?: CSSProperties // 设置面包屑样式
  maxWidth?: string | number // 设置文本最大显示宽度，超出后显示省略号，单位 px
  separator?: string // 自定义分隔符，默认为 '>' string | slot
  separatorStyle?: CSSProperties // 设置分隔符样式
  target?: '_self' | '_blank' // 如何打开目标 URL，当前窗口或新窗口
}
const props = withDefaults(defineProps<Props>(), {
  routes: () => [],
  breadcrumbClass: undefined,
  breadcrumbStyle: () => ({}),
  maxWidth: '100%',
  separator: undefined,
  separatorStyle: () => ({}),
  target: '_self'
})
const breadcrumbAmount = computed(() => {
  return props.routes.length
})
function getTargetUrl(route: Route): string {
  let targetUrl: string = ''
  if (route.path) {
    targetUrl = route.path
  }
  if (route.query && JSON.stringify(route.query) !== '{}') {
    const query = route.query
    Object.keys(query).forEach((param, index) => {
      if (index === 0) {
        targetUrl = targetUrl + '?' + param + '=' + query[param]
      } else {
        targetUrl = targetUrl + '&' + param + '=' + query[param]
      }
    })
  }
  return targetUrl
}
</script>
<template>
  <div
    class="m-breadcrumb"
    :class="breadcrumbClass"
    :style="[
      `
        --breadcrumb-color: rgba(0, 0, 0, 0.45);
        --breadcrumb-bg-color-hover: rgba(0, 0, 0, 0.06);
        --breadcrumb-color-hover: rgba(0, 0, 0, 0.88);
        --breadcrumb-color-active: rgba(0, 0, 0, 0.88);
        --breadcrumb-padding: 0 4px;
        --breadcrumb-border-radius: 4px;
        --breadcrumb-separator-color: rgba(0, 0, 0, 0.45);
      `,
      breadcrumbStyle
    ]"
  >
    <div class="breadcrumb-item" v-for="(route, index) in routes" :key="index">
      <component
        :is="route.path ? 'a' : 'span'"
        class="breadcrumb-link"
        :class="{
          'link-hover': route.path,
          'link-active': index === breadcrumbAmount - 1
        }"
        :style="`max-width: ${maxWidth}px;`"
        :href="getTargetUrl(route)"
        :target="target"
        :title="route.name"
      >
        {{ route.name }}
      </component>
      <span v-if="index < breadcrumbAmount - 1" class="breadcrumb-separator" :style="separatorStyle">
        <slot name="separator" :route="route" :index="index">
          <span v-if="separator">{{ separator }}</span>
          <svg
            v-else
            focusable="false"
            data-icon="right"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
            viewBox="64 64 896 896"
          >
            <path
              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
            ></path>
          </svg>
        </slot>
      </span>
    </div>
  </div>
</template>
<style lang="less" scoped>
.m-breadcrumb {
  font-size: 14px;
  color: var(--breadcrumb-color);
  line-height: 1.5714285714285714;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    .breadcrumb-link {
      display: inline-block;
      color: var(--breadcrumb-color);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: var(--breadcrumb-padding);
      border-radius: var(--breadcrumb-border-radius);
      text-decoration: none;
      cursor: text;
      transition:
        color 0.2s,
        background-color 0.2s;
    }
    .link-hover {
      cursor: pointer;
      &:hover {
        background-color: var(--breadcrumb-bg-color-hover);
        color: var(--breadcrumb-color-hover);
      }
    }
    .link-active {
      color: var(--breadcrumb-color-active);
    }
    .breadcrumb-separator {
      display: inline-flex;
      align-items: center;
      margin: 0 4px;
      color: var(--breadcrumb-separator-color);
      :deep(svg) {
        margin-left: -2px;
        margin-right: -2px;
        fill: currentColor;
      }
    }
  }
}
</style>

②在要使用的页面引入：

其中引入使用了以下组件：

Vue3弹性布局（Flex）

<script setup lang="ts">
import Breadcrumb from './Breadcrumb.vue'
import { ref } from 'vue'
import { ArrowRightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
import type { BreadcrumbRoute } from 'vue-amazing-ui'
const routes = ref<BreadcrumbRoute[]>([
  {
    name: '一级路由',
    path: '/first'
  },
  {
    name: '二级路由',
    path: '/second',
    query: { id: 1, tab: 2 }
  },
  {
    name: '三级路由'
  }
])
const longNameRoutes = ref<BreadcrumbRoute[]>([
  {
    name: '一级路由'
  },
  {
    name: '二级路由',
    path: '/second',
    query: { id: 1, tab: 2 }
  },
  {
    name: '我是一个名字超长的三级路由'
  }
])
const customStyle = {
  '--breadcrumb-color': 'rgba(0, 0, 0, 0.65)',
  '--breadcrumb-bg-color-hover': 'rgba(0, 0, 0, 0.1)',
  '--breadcrumb-color-hover': '#ff6900',
  '--breadcrumb-color-active': '#ff6900',
  '--breadcrumb-padding': '4px 8px',
  '--breadcrumb-border-radius': '8px',
  '--breadcrumb-separator-color': 'rgba(0, 0, 0, 0.65)'
}
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Breadcrumb :routes="routes" />
    <h2 class="mt30 mb10">自定义分隔符</h2>
    <Flex vertical>
      <Breadcrumb :routes="routes" separator="/" />
      <Breadcrumb :routes="routes">
        <template #separator>
          <ArrowRightOutlined />
        </template>
      </Breadcrumb>
      <Breadcrumb :routes="routes">
        <template #separator>
          <DoubleRightOutlined />
        </template>
      </Breadcrumb>
    </Flex>
    <h2 class="mt30 mb10">自定义样式</h2>
    <Flex vertical>
      <Breadcrumb
        :routes="longNameRoutes"
        breadcrumb-class="custom-breadcrumb-class"
        :max-width="210"
        :style="customStyle"
      />
      <Breadcrumb
        :routes="longNameRoutes"
        :max-width="210"
        :breadcrumb-style="{ fontSize: '20px' }"
        :style="customStyle"
      />
      <Breadcrumb
        :routes="longNameRoutes"
        :breadcrumb-style="{ fontSize: '20px', height: '40px' }"
        :separator-style="{ fontSize: '18px' }"
        :max-width="210"
      />
      <Breadcrumb
        :routes="longNameRoutes"
        :breadcrumb-style="{ fontSize: '20px', height: '40px' }"
        :separator-style="{ fontSize: '18px' }"
        :max-width="210"
      >
        <template #separator>
          <ArrowRightOutlined />
        </template>
      </Breadcrumb>
      <Breadcrumb
        :routes="longNameRoutes"
        :breadcrumb-style="{ fontSize: '20px', height: '40px' }"
        :separator-style="{ fontSize: '18px' }"
        :max-width="210"
      >
        <template #separator="{ index }">
          <ArrowRightOutlined v-if="index === 0" />
          <DoubleRightOutlined v-if="index === 1" />
        </template>
      </Breadcrumb>
    </Flex>
    <h2 class="mt30 mb10">新页面打开目标链接</h2>
    <Breadcrumb :routes="routes" target="_blank" />
  </div>
</template>
<style lang="less" scoped>
.custom-breadcrumb-class {
  font-size: 20px;
  color: #1677ff;
  height: 40px;
  :deep(.breadcrumb-item) {
    .breadcrumb-link {
      color: rgba(22, 119, 255, 0.72);
      padding: 0 8px;
      border-radius: 8px;
    }
    .link-hover {
      &:hover {
        color: #fff;
        background: #4096ff;
      }
    }
    .link-active {
      color: #1677ff;
    }
    .breadcrumb-separator {
      color: rgba(22, 119, 255, 0.72);
    }
  }
}
</style>