有时候因为路由设置,导致面包屑名字重复,需要隐藏路由

官方文档说给路由的meta对象设置hiddenHeaderContent为true可以隐藏 PageHeader 组件中的页面带的面包屑和页面标题栏
在这里插入图片描述
可能因为我是通过以下这种方式使用面包屑的,所以试了之后发现没用

<page-header-wrapper :title="false"></page-header-wrapper>
import { PageHeaderWrapper} from '@ant-design-vue/pro-layout'
components: {
     PageHeaderWrapper
},

经多多次尝试终于找到了解决办法,首先在需要隐藏的路由里进行设置hideInBreadcrumb

{
	path: '/service/index',
    name: 'serviceIndex',
    component: () => import('@/views/service/index'),
    meta: { title: '服务商列表', keepAlive: true, permission: ['admin'],hideInBreadcrumb:true }
}

在下方文件进行设置

重写渲染方法:
在这里插入图片描述

// 改写渲染方法,hideInBreadcrumb为真则渲染
      var routes=[];
      $route.matched.concat().forEach((route)=>{
        if(!route.meta.hideInBreadcrumb){
          routes.push({
            path: route.path,
            breadcrumbName: i18n(route.meta.title)
          })
        }
      })

大功告成

Logo

前往低代码交流专区

更多推荐