elementPlus + 动态路由 + 刷新使用面包屑该项目git地址结合项目源码更容易看懂代码更完整这是一

该项目git地址

结合项目源码更容易看懂代码更完整
这是一整个系列可以看看之前的文章能了解数据是怎么封装的

面包屑的实现

使用的是 elementPlus 只需要获取当前或有并将路由的名称信息显示出来就行了

因为使用的动态路由还要根据之前页面刷新保持原来状态不变所以要顶一个函数查找更新一下

面包屑组件

<template>
  <div class="nav-breadcrumb">
    <el-breadcrumb separator="/">
      <template v-for="item in props.breadcrumbs" :key="item.name">
        <el-breadcrumb-item :to="{ path: item.path }">{{
          item.name
        }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import { IBreadcrumb } from '../types'

const props = defineProps({
  breadcrumbs: {
    type: Array as PropType<IBreadcrumb[]>,
    default: () => [],
  },
})
</script>

<style scoped></style>

面包屑父组件

<template>
  <div class="nav-header">
    <i class="iconfont icon-menu" @click="handleFoldClick"></i>
    <div class="content">
      <hy-breadcrumb :breadcrumbs="breadcrumbs" />
      <user-info />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref, computed } from 'vue'

import UserInfo from './user-info.vue'
import HyBreadcrumb from '@/base-ui/breadcrumb'

import { useStore } from '@/store'
import { useRoute } from 'vue-router'
import { pathMapBreadcrumbs } from '@/utils/map-menus'

const emit = defineEmits(['foldChange'])
const isFold = ref(false)
const handleFoldClick = () => {
  isFold.value = !isFold.value
  emit('foldChange', isFold.value)
}

// 面包屑的数据: [{name: , path: }]
const store = useStore()
// 监听面包屑数据变化 如果改变 就是用工具函数 重新生成
const breadcrumbs = computed(() => {
  const userMenus = store.state.login.userMenus
  const route = useRoute()
  const currentPath = route.path
  return pathMapBreadcrumbs(userMenus, currentPath)
})
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  width: 100%;

  .icon-menu {
    font-size: 24px;
    cursor: pointer;
  }

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 20px;
  }
}
</style>

pathMapBreadcrumbs 函数

// /main/system/role  -> type === 2 对应menu
// 收集面包屑的函数
export function pathMapToMenu(
  userMenus: any[],
  currentPath: string,
  breadcrumbs?: IBreadcrumb[]
): any {
  console.log(userMenus, currentPath)
  for (const menu of userMenus) {
    // 1 代表外层 会递归遍历向里面查找
    if (menu.type === 1) {
      // 这里接收深层递归返回的结果
      const findMenu = pathMapToMenu(menu.children ?? [], currentPath)
      // 这里将最终找到的结果返回出去
      if (findMenu) {
        breadcrumbs?.push({ name: menu.name })
        breadcrumbs?.push({ name: findMenu.name })
        return findMenu
      }
      // 找到了 将找到的结果返回
    } else if (menu.type === 2 && menu.url === currentPath) {
      return menu
    }
  }
}

elementPlus + 动态路由 + 刷新 使用 面包屑

该项目git地址

面包屑的实现

elementPlus + 动态路由 + 刷新使用面包屑