【ant design pro vue】pro-layout设置部分路由不在面包屑中展示

最新推荐文章于 2023-11-01 11:35:40 发布

weixin_44617133

最新推荐文章于 2023-11-01 11:35:40 发布

阅读量4.6k

点赞数

分类专栏： Vue 前端学习总结文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44617133/article/details/123290268

版权

前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

Vue

9 篇文章 0 订阅

订阅专栏

学习总结

2 篇文章 0 订阅

订阅专栏

本文详细记录了解决由于路由设置导致面包屑名称重复问题的过程。通过在路由的meta属性中设置`hideInBreadcrumb`为true，可以成功隐藏特定路由在PageHeader组件中的面包屑和标题。同时，还介绍了如何重写渲染方法来确保隐藏功能的实现，对于使用Ant Design Vue Pro布局的开发者来说，这是一个实用的技巧。

摘要由CSDN通过智能技术生成

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

官方文档说给路由的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)
          })
        }
      })

大功告成