【ant design pro vue】pro-layout设置部分路由不在面包屑中展示
使用ant design pro vue路上的问题
·
有时候因为路由设置,导致面包屑名字重复,需要隐藏路由
官方文档说给路由的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)
})
}
})
大功告成
更多推荐
已为社区贡献2条内容
所有评论(0)