umi 获取umirc下router配置的name

于 2024-06-12 11:37:22 发布
阅读量334 收藏
点赞数 3
分类专栏： 随笔 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meis27461/article/details/139622321
版权

解决

import { useRouteProps } from '@umijs/max'

export default function Page() {
  const routeProps = useRouteProps()
  console.log(routeProps)

  // use `routeProps.custom_key`
}

参数如下图
在这里插入图片描述

文档

https://umijs.org/docs/api/api#userouteprops

Yehger
关注
专栏目录
浅谈umi router
aieraflyyyy的博客
02-25 9948
浅谈umi router前言基础路由layout 前言 最近学习UmiJS，在umi-router上踩了许多坑，现记录下所学。 基础路由 假设 pages 目录结构如下： + pages/ + users/ - index.js - list.js - index.js 那么，umi 会自动生成路由配置如下： [ { path: '/', component: '....
【避坑指“难”】umi3分包优化，提升首屏加载时间
椰卤工程师的个人博客
05-24 3066
提升首屏加载时间原理：把大体积的包，分成多个小体积的包进行加载，减少请求时间 chainWebpack配置 在 umi.js 或者 umi.ts 或者 .umirc.js 或者 config.js 中配置，使用 webpack 的优化模块optimization.splitChunks实现。 chunks配置 chunks 配置需要加上 umi，否则打包完后依旧是白屏，在控制台可看到 umi.js 和 umi.css 并没有引入。 compression-webpack-plugin服务端使用gz.
在umi框架当中如何获取在跳转路由的时候传递的参数？
qq_53509791的博客
03-31 1711
首先我们要知道umi框架分为普通路由和约定式路由。而umi框架自身是带有路由管理的，就是在umirc.ts文件当中。普通路由如果在没有进行传递参数的话，是直接引用umi框架自带的history，进行使用import {history . push("你要进行跳转的路径") }然后直接在你想要实现路由跳转的按键上面使用点击事件来触发这个函数。普通路由在进行传递参数的时候，获取传递的参数import {这个时候我们需要将我们想要传递的参数通过 i 传递过去，然后在跳转的路由组件当中通过。
Umi3 创建，配置环境，路由传参（代码示例）
最新发布
kkkys_kkk的博客
01-15 2105
如果没有routes 配置 ， Umi 会进入约定式路由模式， 然后分析src/pages 目录拿到路由配置。在项目文件下创建config文件夹，复制umirc.ts内容，同时删除umirc.ts文件，因为umirc.ts的权重高。或者使用useLocation函数，返回表示当前 URL 的对象。创建config文件，粘贴umirc.ts，将routes作为文件导入引入。在.umirc.ts中的routes配置项中新增路由配置。umi的路由分为配置路由与约定路由。创建路由文件，声明路由，导出。
umi动态路由获取
xxp54321的博客
08-28 640
umi提供了两个函数 useParams 和 useRouteMatch。这时候就可以通过 useRouteMatch 获取到动态路由了。比如动态路由是 /aaaaa/:type/:id。路径是 /aaaaa/1/2。
umi 获取路由参数
tankpanv的博客
01-09 9479
在config.js里 添加路由 { // name: 'applications', // icon: 'smile', path: '/blog/show', component: './blog/ShowSingleArticle', }, 在路由query的参数存在props.location.query 结构里 const EditArticle: FC&l
umi 路由
weixin_43294560的博客
07-18 4348
在.umirc.ts的routes进行路由配置 1、配置路由 routes:[{path:'/路径',components:'路径,@为src,不需要引入组件',exact:true}] 配置: redirect:'/重定向路由路径' title:'路由页面名称' wrappers:['/路由校验的组件路径'] 其中该组件: export default (props) => { 校验操作 return {prop
umi 路由配置
大龙帅的博客
04-05 8934
一、基础路由 项目根目录下新建文件夹：config/routes.tsx （umi约定，位置不能错，不然引入会报错） routes.tsx import type { IRoute } from 'umi'; const routes: IRoute[] = [ { path: '/', component: '@/pages/index' } ]; export default routes; .umirc.ts这个文件内引入 简单介绍下这个文件：umi的配置文件，参考官方文档 impo
umi:配置式路由
胡世林的博客
10-31 5054
场景描述 很多时候，我们需要做到简单的路由拦截，比如用户未登录的时候，我们需要跳转到登录页面，等到用户登录后在重新跳转到之前的页面，而很多情况下这些是约定式路由无法完成的，就需要我们配置式路由 论述 umi自带的约定式路由，可以自动的生成路由文件(运行时，生成.umi/core/router.ts中),而使用约定式路由的时候，不需要我们在.umirc.ts中去添加route项，相反，也就是说,如果我们要启用配置式路由的时候，我们需要动态的去配置routes项，如下 import { defineC
Umi + React + Ant Design Pro 项目实践（六）—— ProLayout 应用
且听风吟的博客
03-15 1552
Umi + React + Ant Design Pro 项目实践 ProLayout 应用
webpack学习之对比 umi 和 create-react-app的打包流程和优化配置
weixin_33801856的博客
03-24 4283
[toc] 对外配置文件对比 umi .umirc.js // ref: https://umijs.org/config/ export default { treeShaking: true, plugins: [ // ref: https://umijs.org/plugin/umi-plugin-react.html ['umi-plugin-react', { ...
umi脚手架搭建的项目_使用umi脚手架来初始化React项目
weixin_32093519的博客
01-30 1070
一、开发环境首先，请安装 NodeJS。NodeJS 是一个 JS 执行环境，umi 基于 JS 编写，并且需要在你的开发机上运行，所以依赖于它。安装完成后，执行下面的命令确认是否安装成功。node -vnpm -v在 umi 中我们采用了一些 NodeJS 的新特性，请确保你的 NodeJS 版本大于等于 8.5.0。在国内，你可以安装cnpm获得更快速、更安全的包管理体验。使用如下命令安装：n...
umi使用记录
水蓝针织
12-15 1488
1.umi是什么？ 他是“蚂蚁金服的底层前端框架” 他包含了路由、部署、测试等一些列功能的企业级的可扩展的前端底层框架 2.目录 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201215151623343.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTYxOTM1,size
Umi踩坑：Umi路由配置（原理、解决办法）
热门推荐
实事求是，艰苦奋斗，小小的梦想，终将实现。
12-15 2万+
前言 以前都是使用vue的脚手架或者是node.js中的路由配置，当用惯了这些后，在使用Umi发现路由怎么都配置不对，我淦！！！，这个游戏也太难了。配了半天也配不对，去官网研究了以下，发现是一个思维逻辑出现了错误。我们来看看。 提示：以下是本篇文章正文内容，下面案例可供参考 一、问题描述 我们就拿vue来说。 import Vue from 'vue' import Router from 'vue-router' //import Login from '.././views/login.vue' //
Umi从服务端动态获取路由
魔仙女王的魔法杖
05-11 6122
Umi从服务端动态获取路由背景1、前提2、过程 背景 一开始我是在route.ts文件下将路由写死，需求方提出要从服务端动态获取左侧菜单，实现动态路由 1、前提 根据UmiJs官方文档中，我们可以看到运行时配置，提供了配置项，patchRoutes({ routes })和render(oldRender: Function) patchRoutes({ routes }) ，官方demo中介绍的清清楚楚，在这我们可以获取已经配置好的路由，也可以进行修改； render(oldRender: Functi
umi 配置路由 独立路由文件
路人贾！
02-16 841
umi 配置路由 独立路由文件
umi react菜单配置（router文件路由+接口路由组合）
dmr123456的博客
05-16 1003
【问题描述】：项目路由由前端路由文件以及后端接口获取到的路由组合而成，接口获取到的路由菜单选中无标记，且会自动折叠。如果接口返回的菜单格式与前端路由文件中的有些许不一致，则需重写。，重写菜单选中、打开逻辑。,对数据进行改造组合。
UmiJS之路由
Jason_LS的博客
08-16 8276
路由 umi 会根据pages目录自动生成路由配置。 约定式路由 基础路由 假设 pages 目录结构如下： + pages/ + users/ - index.js - list.js - index.js 那么，umi 会自动生成路由配置如下： [ { path: '/', component: './pages/index.js' }, { path: '/...
umi3 router配置
08-04
在umi3中，路由配置可以通过在项目根目录下的config/routes.tsx文件中定义路由数组来实现。可以使用IRoute接口来定义每个路由的属性。例如，可以使用path属性指定路由的路径，component属性指定路由对应的组件。可以使用exact属性来指定是否精确匹配路由。可以使用routes属性来定义子路由。[1] 另外，可以在.umirc.ts文件中引入路由配置文件，并将其添加到routes数组中。可以使用defineConfig函数来定义umi的配置。可以使用nodeModulesTransform属性来设置是否对node_modules中的文件进行转换。可以使用history属性来设置路由的类型，例如hash或者browser。可以使用fastRefresh属性来启用快速刷新功能。[1] 如果需要使用动态路由，可以在路由配置文件中使用动态参数，例如/details/:id?，其中:id?表示id参数是可选的。[2] 另外，如果想在项目根目录下创建config文件夹，并在其中创建router.config.js文件来配置路由，可以按照给出的代码示例进行配置。可以使用path属性指定路由的路径，component属性指定路由对应的组件，exact属性指定是否精确匹配路由。可以在routes数组中定义子路由。[3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值