【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案

news2024/11/26 2:28:14

作者:CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

使用环境:WebStorm

目录

问题概述

原因

解决方案

解决方法

潜在问题修改

最终效果呈现

额外内容

管理员界面路由配置

WebStorm背景更换

法一:

法二:


问题概述

我们在使用AntDesignPro的umi框架进行客户端界面搭建时,可能会出现左侧菜单栏的名称没有了的情况,就是下面这个“欢迎”和“查询表格”这两段文字和两个“表情”都不显示:

原因

这个消失的原因是我们使用AntDesignPro框架时,在config文件当中的routes.ts的路由配置不完全,即这个文件:

正是因为routes.ts当中缺少name属性才导致此问题出现,因此解决方案就是我们只需要补齐name即可。

进入该ts文件的代码,我们会发现如下代码都缺少name属性,这里是博主已经补全了,所以有name,实际上是没有的,所以才不显示:

解决方案

解决方法

因此,我们只需要补齐代码即可。这里我也将需要修改的代码直接贴出,供大家参考和问题分析:

path: '/user',
    layout: false,
    routes: [
      {
        path: '/user', routes: [
          {name: '登陆', path: '/user/login', component: './user/Login'},
          {name: '注册', path: '/user/register', component: './user/Register'},
        ]
      },
      {component: './404'}
    ],
  },

潜在问题修改

同时,下面的“管理页”相关代码也缺少name属性,会导致后续写管理界面出现问题,我们同样需要及时补充,避免潜在的问题:

{path: '/welcome', name: '欢迎', icon: 'smile', component: './Welcome'},
  {
    path: '/admin',
    name: '管理页',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',
    routes: [
      {path: '/admin/sub-page', name: '二级管理页', icon: 'smile', component: './Welcome'},
      {component: './404'},
    ],
  },
  {name: '查询表格', icon: 'table', path: '/list', component: './TableList'},
  {path: '/', redirect: '/welcome'},
  {component: './404'},

最终效果呈现

至此,问题已经解决,我们来看一下最终效果:

这里博主也是对一些敏感信息进行了打码,希望大家谅解:)

额外内容

管理员界面路由配置

如果我们想要在可访问的页面当中,添加一个管理员页面(下方的Admin):

那么我们需要在刚刚的routes.ts路由当中进行补充代码,我们找到path为Admin的部分,并在这一部分的routes当中补充管理员的路由信息:

{path: '/Admin/user-manager', name: '用户管理', icon: 'smile', component: './UserManage'},

在添加完成代码之后,其结构就这样就完整了,大致的结构如下:

{
    path: '/Admin',
    name: '管理页',
    icon: 'crown',
    access: 'canAdmin',
    component: './Admin',
    routes: [
      {path: '/Admin/user-manager', name: '用户管理', icon: 'smile', component: './UserManage'},
      {path: '/Admin/sub-page', name: '二级管理页', icon: 'smile', component: './Welcome'},
      {component: './404'},
    ],
  },

WebStorm背景更换

什么?你说上面看到了我的背景挺好看的?一招教你怎么换背景:

法一:

直接CSDN搜怎么换背景,是不是很快呀!(雾)

法二:

找到设置当中的Appearance,能看到一个Background Image,点这里就可以换背景啦!

作者:CSDN-PleaSure乐事

希望我的博客对您有帮助,也希望在对您有帮助时您可以为我留下点赞收藏与关注,这对我真的很重要,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237700.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

布谷直播源码部署服务器关于数据库配置的详细说明

布谷直播源码搭建部署配置接口数据库 /public/db.php(2019年8月后的系统在该路径下配置数据库,老版本继续走下面的操作) 在项目代码中执行命令安装依赖库(⚠️注意:如果已经有了vendor内的依赖文件的就不用执行了&am…

Spring中的过滤器和拦截器

Spring中的过滤器和拦截器 一、引言 在Spring框架中,过滤器(Filter)和拦截器(Interceptor)是实现请求处理的两种重要机制。它们都基于AOP(面向切面编程)思想,用于在请求的生命周期…

Day16二叉树的中序遍历

给定一个二叉树的根节点 root ,返回它的中序遍历 。 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(i…

RT-DETR实战TT100K中国交通标志识别

本文采用RT-DETR作为核心算法框架,结合PyQt5构建用户界面,使用Python3进行开发。RT-DETR以其高效的实时检测能力,在多个目标检测任务中展现出卓越性能。本研究针对TT100K交通标志数据集进行训练和优化,该数据集包含丰富的TT100K交…

图像信号处理器(ISP,Image Signal Processor)详解

简介:个人学习分享,如有错误,欢迎批评指正。 图像信号处理器(ISP,Image Signal Processor) 是专门用于处理图像信号的硬件或处理单元,广泛应用于图像传感器(如 CMOS 或 CCD 传感器&a…

js基础篇笔记 (万字速通)

此笔记来自于黑马程序员,仅供笔者复习 JavaScript 基础 - 第1天 了解变量、数据类型、运算符等基础概念,能够实现数据类型的转换,结合四则运算体会如何编程。 体会现实世界中的事物与计算机的关系理解什么是数据并知道数据的分类理解变量存储数据的“容…

【GPTs】EmojiAI:轻松生成趣味表情翻译

博客主页: [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 💯GPTs指令💯前言💯EmojiAI主要功能适用场景优点缺点 💯小结 💯GPTs指令 中文翻译: 此 GPT 的主要角色是为英文文本提供幽默…

H.264/H.265播放器EasyPlayer.js无插件H5播放器关于WASM的压缩优化

在当今的Web开发领域,流媒体播放器的性能和效率至关重要,尤其是在处理大型视频文件和高分辨率视频流时。EasyPlayer.js RTSP播放器作为一款先进的流媒体播放器,它在WebAssembly(WASM)的压缩优化方面表现出色&#xff0…

Unity Shader分段式血条

Unity Shader分段式血条 前言项目ASE连线 前言 要给单位加一个类似LOL的分段式血条,用ASE实现并记录一下。里面加了旋转和颜色的渐变。 项目 ASE连线

基于 STM32 的天气时钟项目中添加天气数据的网络获取功能

基于 STM32 的天气时钟项目中添加天气数据的网络获取功能,您需要确保您的开发环境具备网络连接能力。这里以 ESP8266 Wi-Fi 模块为例,详细说明如何实现网络获取天气数据的功能。 1. 硬件连接 连接 ESP8266 模块 请参考以下连接方式,将 ESP82…

element-plus按需引入报错AutoImport is not a function

官网文档:快速开始 | Element Plus webpack配置 // webpack.config.js const AutoImport require(unplugin-auto-import/webpack) const Components require(unplugin-vue-components/webpack) const { ElementPlusResolver } require(unplugin-vue-components…

MatSci-LLM ——潜力和挑战以及大规模语言模型在材料科学中的应用

概述 大规模语言模型的出现正在从根本上改变技术开发和研究的方式。大规模语言模型不仅对自然语言处理领域产生了重大影响,而且对许多相关领域也产生了重大影响,例如从文本生成图像的计算机视觉(Zhang 等人,2023 年)。…

【系统架构设计师(第2版)】五、软件工程基础知识

5.1 软件工程 20世纪60年代,为了解决软件危机,提出了软件工程的概念。 软件危机的具体表现: 软件开发进度难以预测;软件开发成本难以控制;软件功能难以满足用户期望;软件质量无法保证;软件难以…

C++builder中的人工智能(17):神经网络中的自我规则非单调(Mish)激活函数

在这篇文章中,我们将探讨自我规则非单调激活函数——Mish在神经网络中的应用。了解Mish函数的工作原理,将有助于您在使用C IDE构建C应用程序时更加得心应手。 目录 神经网络中的激活函数是什么?能在C中创建激活函数吗?自我规则非…

华为eNSP实验:IP Source Guard

一:IP Source Guard: IP Source Guard(简称IPSG)是一种基于二层接口的源IP地址过滤技术,用于防止恶意主机伪造合法主机的IP地址进行网络攻击。以下是对IP Source Guard的详细解析: 基本概念: IP Source Gu…

Git进阶(十八):git rebase详解

文章目录 一、前言二、rebase 图解三、应用示例四、重建提交历史五、rebase VS merge六、拓展阅读 一、前言 rebase 使用方法 git rebase [基节点] git rebase [基节点] [待变基节点]rebase后面的参数可以是两个,也可以是一个,当rebase为一个参数的时…

【笔记】扩散模型(九):Imagen 理论与实现

论文链接:Photorealistic Text-to-Image Diffusion Models with Deep Language Understanding 非官方实现:lucidrains/imagen-pytorch Imagen 是 Google Research 的文生图工作,这个工作并没有沿用 Stable Diffusion 的架构,而是级…

华夏风物 3.2.0 | 中国风物志,记录各地特产、美食、风景,旅游吃货必备

华夏风物是一款记录中国各地风物的App,类似于一本中国“风物志”。它记录了各地的特产、美食、风景,为用户提供了一个了解和探索中国文化的窗口。该应用的社区氛围非常真实,用户可以发现许多家乡的特色小吃和传统手艺。许多帖子由当地人发布&…

BIST(Built-in Self-Test,内建自测试)学习笔记

参考资料: 内建自测试(Built-in Self-Test,简称BIST)详解_built in self test-CSDN博客 芯片测试术语 ,片内测试(BIST),ATE测试-CSDN博客 可能是DFT最全面的介绍--BIST - 知乎 (zhihu.com) 汽车功能安全--TC3xx LB…

【Ubuntu24.04】从双系统到虚拟机再到单系统的故事

故事 在大学前期,我使用Ubuntu系统都是为了学习一些命令或者其它Linux的东西,对性能的要求不高,所以选择了虚拟机,后来为了做毕设,选择安装了Ubuntu20.04双系统,因为虚拟机实在带不动,那时我的主…