ant-desigh+prolayout布局，修改面包屑的分隔符号，百度搜遍了都找不到办法，csdn解决了

ProComponents前端小伙伴对此是又爱又恨啊，一些属性配置实在隐藏的太深了，搜索引擎翻了个遍，难道全世界只有我想改面包屑的分隔符吗，简直是难为胖虎。

@ant-design/pro-layout

@ant-design/pro-layout.

 npm install --save-dev @ant-design/pro-layout

这是默认的面包屑样式：/

为了修改面包屑样式，需要改进其中的breadcrumbRender，代码如下（这里很重要！！！！！！*****）

breadcrumbRender={(routers = []) => {console.log('2333', routers);let arr = [{path: '/',breadcrumbName: formatMessage({ id: 'menu.home' }),},...routers,]localStorage.setItem('changeRoute', JSON.stringify(arr))return arr}}

导入面包屑组件:

import { PageHeaderWrapper } from '@ant-design/pro-layout';

在return的jsx最外层包裹面包屑组件:

<PageHeaderWrapper title="我的测试">这是我的测试页面</PageHeaderWrapper>

在路由进行配置:

{path: '/demo',name: '测试',hideInMenu: 'true',component: './demo'
},

到这里，开篇的那张图的面包屑就实现了。接下来就开始改面包屑的“瞎子摸鱼游戏”。俗话说的话，想解决问题，就追溯到问题的根源，回到起点去。程序员写代码的最开始…就是官方文档了，找到ProLayout的官方文档：https://procomponents.ant.design/components/layout#api直奔主题，看下图：

breadcrumbRender配置源码：

 breadcrumbRender?: (routers: AntdBreadcrumbProps['routes']) => AntdBreadcrumbProps['routes'];

Breadcrumb配置源码：

看到这里似乎有点头绪，修改PageHeaderWrapper 传入参数来复写默认值:

面包屑分隔符成功从 “/” 改成了 “<”

总结：看完全文，重点就在于

localStorage.setItem(‘changeRoute’, JSON.stringify(arr))
JSON.parse(localStorage.getItem(“changeRoute”))

面包屑下面的那行字去掉

来源：https://blog.csdn.net/weixin_42224055/article/details/108790625#comments_13894324

ant-desigh+prolayout布局，修改面包屑的分隔符号，百度搜遍了都找不到办法，csdn解决了相关推荐

前端学习（3046）：vue+element今日头条管理-页面布局和面包屑筛选
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率. 写在前面的话:博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录.我的项目gitee地址: https://gitee. ...
修改elementUI中面包屑文字颜色
1.修改面包屑文字大小 ::v-deep {.el-breadcrumb__item {font-size: 35px;} } 2.修改面包屑文字颜色 .el-breadcrumb ::v-deep ...
帝国cms面包屑导航修改方式大合集
为了获得更好的收录效果与排名,面包屑导航也成为了我们的一个优化点.但面包屑导航要如何优化呢? 可以优化的方面包括: 面包屑导航newsnav默认效果面包屑导航newsnav标签修改面包屑导航new ...
design php 如何使用ant_Ant Design Pro初探—添加面包屑
Ant Design Pro初探-添加面包屑上次咱们说了新建页面!页面建成了,开始填充页面新建面页面不会的看上一片文章:Ant Design Pro初探-新建页面首先是需要添加家面包屑,上代码: ...
react+ant design Breadcrumb面包屑组件
import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...
爱上MVC3系列~开发一个站点地图(俗称面包屑)
回到目录原来早在webform控件时代就有了SiteMap这个东西,而进行MVC时代后,我们也希望有这样一个东西,它为我们提供了不少方便,如很方便的实现页面导航的内容修改,页面导航的样式换肤等. 我 ...
css面包屑导航_在CSS3中编写优美的面包屑导航菜单
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 导航菜单和链接可能是Web布局中最重要 ...
改变路径但是不让它跳转_Vue实战047：Breadcrumb面包屑实现导航路径
前言在网站中我们经常看到有个导航路径,可以直观地显示当前页面的路径,并快速返回之前的任意页面.这是一个非常实用的功能,也是在Web前端必备的导航UI之一.今天我们借助el-breadcrumb来快速 ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

ant-desigh+prolayout布局，修改面包屑的分隔符号，百度搜遍了都找不到办法，csdn解决了

ant-desigh+prolayout布局，修改面包屑的分隔符号，百度搜遍了都找不到办法，csdn解决了相关推荐

最新文章

热门文章