umi - history传参

这个昵称也不能用吗？

已于 2023-10-30 15:38:46 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

于 2023-10-10 17:44:21 首次发布

本文链接：https://blog.csdn.net/qq_37766810/article/details/133752244

本文介绍了Umi框架中路由参数的不同传参方式（query,search,state）及其特点，强调了新版本中query的使用推荐以及如何通过自定义属性控制刷新后参数消失的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Umi 路由传参

1. query \ search 两者是一致的，保存方式不同。展示到路由里为：xx/xx/?aa=11&bb=22 这种格式

来自官网：location 中的 query 不再支持了，后续推荐用 search

2. state \ query \ search 刷新后都不丢失

3、state 不展示到路由

在这里插入图片描述
以下是新版本umi history.push 的入参定义的

export interface LocationDescriptorObject<S = LocationState> {
    pathname?: Pathname;
  	
  	query?: ParsedQuery;
    search?: Search;
    state?: S; 

    hash?: Hash;
    key?: LocationKey;
  
}

4、 xx/:id/xx这种传参方式。在老版本的umi 里通过： `this.props.match`访问到数据. 新的是通过，useMath 详见官网

在这里插入图片描述

react路由传参

3种方式

params \ search \ state 其中 state不展示到页面。hash路由模式下，刷新会丢失。
params: 是 /:id/ 这种
search 是 /?xxx=1213 这种
state : 不展示到页面

参考

问题：我想给某个页面穿个参数，但是还想让刷新后，参数消失怎么做？

解答：定义一个不存在于history.push入参里的属性即可

 history.push({
                pathname: '/package/list/',
                query: { customer_id },
                needRefresh: true,   //这个属性就是自己加的，刷新后就会消失
              } as LocationDescriptorObject);