浏览器history模式及Umi history的使用
2023-03-14 22:39:28 时间
history API 是 H5 提供的新特性,允许开发者直接更改前端路由,即更新浏览器 URL 地址而不重新发起请求。它提供了丰富的函数供开发者调用:
push
:向 history 栈里添加一条新记录,用户点击浏览器的回退按钮可以回到之前的路径;
go
:在 history 记录中向前或者后退多少步,参数是一个整数,可为正数可为负数;
goBack
:返回上一页;
forward()
:前进;
replace
:替换当前的 history 记录,跳转到指定的 url,不会向 history 添加新的记录,点击返回,会跳转到上一个页面,上一个记录是不存在的;
常用示例:
location.reload()
刷新
history.go(1)
前进
history.go(-1)
后退
history.forward()
前进
history.back()
后退 + 刷新
扩展:
history.back 与 history.go 的区别:
history.back(-1)
直接返回当前页的上一页,数据全部消息,是个新页面
history.go(-1)
也是返回当前页的上一页,不过表单里的数据全部还在
Umi中history 相关实用API
1、获取当路由信息
import { history } from 'umi';
// history 栈的实体个数
console.log(history.length);
// 当前 history 跳转的action, 有push/replace/pop 三种类型
console.log(history.action)
// location 对象,包含 pathname/search/hash
console.log(history.location.pathname)
console.log(history.location.search)
console.log(history.location.hash)
2、路由跳转
import { history } from 'umi';
// 跳转到指定路由
history.push('/list')
// 带参数跳转到指定路由
history.push('/list?a=b')
history.push({
pathname: '/list',
query: {
a: 'b'
}
})
// 跳转到上一个路由
history.goBack();
3、路由实时监听
import { history } from 'umi';
const unlisten = history.listen((location, action) => {
console.log(location.pathname)
})
unlisten()
未经允许不得转载:w3h5 » 浏览器history模式及Umi history的使用
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的