Ant Design Pro Vue面包屑层级重复显示问题咨询

咱们直接来拆解问题根源，然后一步步修复：

1. 先修正路由配置的核心问题 #

你的router.config.js里有两个关键问题导致了重复：

• 父路由/settings/user和子路由/settings/user/list的name都是user，路由名称必须唯一，否则会导致匹配逻辑混乱
• 父路由本身是仅用于跳转的容器路由（设置了redirect和hideChildrenInMenu），却和子路由用了相同的meta.title，导致匹配时被重复加入面包屑

修改后的路由配置：

{ 
  path: '/settings', 
  name: 'settings', 
  component: RouteView, 
  redirect: '/settings/user', 
  meta: { title: '系统设置', keepAlive: true, icon: bxAnaalyse }, 
  children: [ 
    { 
      path: '/settings/user', 
      name: 'userManage', // 改成唯一名称，避免和子路由冲突
      component: RouteView, 
      redirect: '/settings/user/list', 
      meta: { 
        title: '用户管理', // 修改标题，区分于子路由
        keepAlive: false,
        hiddenInBreadcrumb: true // 新增标识：不在面包屑中显示
      }, 
      hideChildrenInMenu: true, 
      children: [ 
        { 
          path: '/settings/user/list', 
          name: 'userList', // 改成唯一名称
          component: () => import('@/views/settings/user/index'), 
          meta: { title: '用户列表', keepAlive: false } 
        }, 
        { 
          path: '/settings/user/add', 
          name: 'addUser', // 同样改成唯一名称
          component: () => import('@/views/settings/user/add'), 
          meta: { title: '新增用户', keepAlive: true, hidden: true } 
        } 
      ] 
    }, 
  ] 
},

2. 优化面包屑组件的过滤逻辑 #

原来的组件直接把$route.matched的所有路由项都加入面包屑，没有过滤掉容器路由。现在我们利用新增的hiddenInBreadcrumb标识来过滤不需要显示的项：

修改后的Breadcrumb.vue脚本部分：

<template>
  <a-breadcrumb class="breadcrumb">
    <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
      <router-link 
        v-if="item.name !== name && index !== 0" 
        :to="{ path: item.path === '' ? '/' : item.path }"
      >
        {{ item.meta.title }}
      </router-link>
      <span v-else>{{ item.meta.title }}</span>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      breadList: []
    }
  },
  created () {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb () {
      this.breadList = []
      // 手动添加首页项
      this.breadList.push({name: 'index', path: '/', meta: {title: '首页'}})
      this.name = this.$route.name
      // 过滤掉标记为不在面包屑显示的路由
      this.$route.matched.forEach(item => {
        if (!item.meta?.hiddenInBreadcrumb) {
          this.breadList.push(item)
        }
      })
    }
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  }
}
</script>

问题根源回顾 #

之前面包屑重复是因为$route.matched会返回所有匹配到的路由层级——包括作为容器的父路由/settings/user和实际页面的子路由/settings/user/list，而两者的title完全相同。通过给容器路由添加隐藏标识并在组件中过滤，就能得到正确的面包屑层级：「首页 / 系统设置 / 用户列表」。

内容的提问来源于stack exchange，提问作者wen tian