路由配置修改(五)

server/2024/9/23 2:05:14/

一、默认约定式路由

1、umi 会根据 pages 目录自动生成路由配置。
* @name umi 的路由配置* @description 只支持 path,component,routes,redirect,wrappers,name,icon 的配置* @param path  path 只支持两种占位符配置,第一种是动态参数 :id 的形式,第二种是 * 通配符,通配符只能出现路由字符串的最后。* @param component 配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径,也可以是相对路径,如果是相对路径,会从 src/pages 开始找起。* @param routes 配置子路由,通常在需要为多个路径增加 layout 组件时使用。* @param redirect 配置路由跳转* @param wrappers 配置路由组件的包装组件,通过包装组件可以为当前的路由组件组合进更多的功能。 比如,可以用于路由级别的权限校验* @param name 配置路由的标题,默认读取国际化文件 menu.ts 中 menu.xxxx 的值,如配置 name 为 login,则读取 menu.ts 中 menu.login 的取值作为标题* @param icon 配置路由的图标,取值参考 https://ant.design/components/icon-cn, 注意去除风格后缀和大小写,如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward,如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User* @doc https://umijs.org/docs/guides/routes

其中针对多语言,name的应用相当关键。name 配置路由的标题,默认读取国际化文件 menu.ts 中 menu.xxxx 的值,如配置
name 为 login,则读取 menu.ts 中 menu.login 的取值作为标题

2、config/routes.ts、src/locales/zh-CN/menu.ts以及项目pages下文件结构需要一一对应
export default [{path: '/user',layout: false,routes: [{name: 'login',path: '/user/login',component: './User/Login',},],},{path: '/index',name: 'home',icon: 'smile',component: './home',},{path: '/func',name: 'func',icon: 'crown',access: 'canAdmin',routes: [{path: '/func',redirect: '/func/funcManage',},{path: '/func/funcManage',name: 'funcManage',component: './funcManage',},],},{name: 'userManage',icon: 'table',path: '/userManage',component: './userManage',},{path: '/',redirect: '/index',},{path: '*',layout: false,component: './404',},
];
export default {'menu.home': '首页','menu.func': '功能管理','menu.func.funcManage': '功能管理','menu.userManage': '用户管理','menu.login': '登录','menu.register': '注册'
}

在这里插入图片描述

最终呈现效果就是自定义的一样

3、首页/index

在这里插入图片描述

4、功能管理/func/funcManage

在这里插入图片描述

5、功能管理/userManage

在这里插入图片描述


http://www.ppmy.cn/server/94125.html

相关文章

C#知识|XML文件操作

哈喽,你好啊,我是雷工! 之前有朋友在群里聊XML文件操作的问题,今天正好学习相关内容, 以下为学习笔记。 01 XML介绍 ①:XML是eXtensible Markup Language的缩写,即扩展标记语言。 ②:XML是一种可以用来创建自定义的标记语言,由W3C(万维网协会)创建,用来克服HTML的局…

为 Laravel 提供生产模式下的容器化环境:打造现代开发环境的终极指南

为 Laravel 提供生产模式下的容器化环境&#xff1a;打造现代开发环境的终极指南 在现代开发中&#xff0c;容器化已经成为一种趋势。使用 Docker 可以让我们轻松地管理和部署应用程序。本文将带你一步步构建一个高效的 Laravel 容器化环境&#xff0c;确保你的应用程序在开发…

案例分享—国外优秀ui设计作品赏析

国外UI设计创意迭出&#xff0c;融合多元文化元素&#xff0c;以极简风搭配动态交互&#xff0c;打造沉浸式体验&#xff0c;色彩运用大胆前卫&#xff0c;引领界面设计新风尚 同时注重用户体验的深度挖掘&#xff0c;通过个性化定制与智能算法结合&#xff0c;让界面不仅美观且…

C#中多线程编程中的同步、异步、串行、并行及并发及死锁

在C#中&#xff0c;多线程编程是一个强大的功能&#xff0c;它允许程序同时执行多个任务。然而&#xff0c;这也带来了复杂性&#xff0c;特别是在处理同步、异步、串行、并行、并发以及死锁等问题时。下面我将详细解释这些概念&#xff0c;并给出一些C#中的示例和注意事项。 …

分析为什么在 PyTorch 中,训练好深度神经网络后要使用 model.eval()

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 训练模式 VS 评估模式。首先&#xff0c;我们需要明确 PyTorch 中的模型存在两种重要模式&#xff1a;训练模式&#xff08;training mode&#xff09;与评估模式&#xff08;evaluation mode&#xff…

基于SpringBoot+Vue的校园便利平台(带1w+文档)

基于SpringBootVue的校园便利平台(带1w文档) 基于SpringBootVue的校园便利平台(带1w文档) 本平台采用B/S架构、采用的数据库是MySQL&#xff0c;使用JAVA技术开发。该平台的开发方式无论在国内还是国外都比较常见&#xff0c;而且开发完成后使用普遍&#xff0c;可以给平台用户…

新版绿豆视频APP视频免授权源码6.1版本_插件版

新版绿豆视频APP视频免授权源码插件版后端插件开源&#xff0c;可直接反编译修改方便&#xff0c;对接苹果CMS,自定义DIY页面布局&#xff01; 绿豆影视APP对接苹果cms&#xff0c;所有页面皆可通过后端自由定制&#xff0c;此版本后端源码前端是壳&#xff08;反编译版本)&am…

大学新生编程入门最佳攻略

引言 编程的重要性&#xff1a;简述编程在当今社会的地位&#xff0c;为何它是大学生的必备技能。目标设定&#xff1a;明确文章旨在帮助新生从零基础开始&#xff0c;逐步成长为编程高手。 方向一&#xff1a;编程语言选择 1. 编程语言概览 介绍几种流行语言&#xff1a;如…