breadcrumbPlugin - 面包屑导航

什么是 breadcrumbPlugin？

breadcrumbPlugin 是一个用于生成面包屑导航的插件。它会在页面顶部显示当前页面的层级路径，帮助用户了解自己在网站中的位置。

启用插件

import { createRouter, breadcrumbPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    breadcrumbPlugin()
  ]
})

在路由中配置

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      title: '仪表盘'
    }
  },
  {
    path: '/users',
    component: Users,
    meta: {
      title: '用户管理'
    },
    children: [
      {
        path: 'list',
        component: UserList,
        meta: {
          title: '用户列表'
        }
      },
      {
        path: 'add',
        component: UserAdd,
        meta: {
          title: '添加用户'
        }
      }
    ]
  }
]

在 template 中使用

<template>
 <ul>
   <li v-for="item in $router.buildBreadcrumbs()" :key="item.path">{{item.title}}</li>
 </ul>
</template>

在 setup 中使用

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
console.log(router.buildBreadcrumbs())
</script>

插件配置选项

选项	类型	默认值	说明
resolveBreadcrumb	(item: BreadcrumbItem, matchedRoute: RouteLocationMatched) => BreadcrumbItem	-	选填，可以二次处理面包屑，比如支持国际化

路由 Meta 配置选项

选项	类型	默认值	说明
title	string	-	选填，面包屑标题
icon	string	-	选填，面包屑图标，可填写 iconify 网站支持的图标，也可以填写图片地址
hideInBreadcrumb	boolean	false	选填，是否不在面包屑中显示