Vue3 - AntDesignVue 实现动态面包屑带 icon 图标

最新推荐文章于 2025-05-09 20:41:28 发布

子玖

最新推荐文章于 2025-05-09 20:41:28 发布

阅读量762

点赞数 8

文章标签： vue.js 前端 javascript anti-design-vue vue

本文链接：https://blog.youkuaiyun.com/weixin_61463372/article/details/137245849

版权

本文介绍了如何在Vue3项目中结合AntDesignVue库，通过设置路由元信息和配置Breadcrumb组件，实现带有图标的动态面包屑导航。详细步骤包括在路由配置中添加meta信息以存储面包屑数据，然后在Breadcrumb组件内部利用这些信息创建动态组件来展示图标。

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

Ant Design Vue - Breadcrumb 面包屑

设置路由中的 mete

路由中的配置
通过配置 meta 让我们拿到面包屑所需的名称 + icon 图标

// router/index.ts
import { HomeOutlined, GlobalOutlined } from '@ant-design/icons-vue';
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/site",
      name: "site",
      component: () => import("../views/SiteView.vue"),
      meta: {
        path: "site",
        breadcrumbName: "网站",
        icon: GlobalOutlined,
      },
      children: [
        {
          path: "site02",
          name: "site02",
          component: () => import("../views/SiteView02.vue"),
          meta: {
            path: "site02",
            breadcrumbName: "网站02",
          },
        },
      ],
    },
  ],
});

配置组件

面包屑组件
通过 Ant Design Vue 中 breadcrumb 定义面包屑
通过 route.matched 拿到路由中的 meta
利用动态组件 component 设置动态图标 icon

<template>
  <a-breadcrumb style="margin: 16px 0" :routes="breadcrumb">
    <template #itemRender="{ route, paths }">
      <span v-if="breadcrumb.indexOf(route) === breadcrumb.length - 1">
        <!-- 如果是当前位置，则不需要跳转 -->
        <component :is="route.icon"></component>
        {{ route.breadcrumbName }}
      </span>
      <router-link v-else :to="`/${paths.join('/')}`">
        <component :is="route.icon"></component>
        {{ route.breadcrumbName }}
      </router-link>
    </template>
  </a-breadcrumb>
</template>
<script lang="ts" setup>
import { HomeOutlined } from "@ant-design/icons-vue";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();

// 面包屑参数
const breadcrumb = computed(() => {
  let matchedArr = route.matched.map((item) => item.meta);
  if (matchedArr[0].breadcrumbName !== "首页") {
    // 因为 router.matched 不会携带第一个，我们需要给组件添加一个默认首页; 
    const first = {
      path: "/",
      breadcrumbName: "首页",
      icon: HomeOutlined,
    };
    matchedArr.unshift(first);
  }
  return matchedArr;
});
</script>