作者:lubin | 来源:互联网 | 2023-08-12 13:26
场景: 一、单页面web程序中列表页有1000条数据,点击一条数据跳转到详细页,然后详细页放回列表页保存列表页有1000条数据不变。解决方案 一、用新窗口打开详细页面不让用户返
场景:
一、 单页面web程序中列表页有1000条数据,点击一条数据跳转到详细页,然后详细页放回列表页保存列表页有1000条数据不变。
解决方案
一、用新窗口打开详细页面不让用户返回。
二、如果是APP模式,监控发起URL地址发现打开链接类型:_blank, 弹出一个新的 webview窗口去承载详细页。
三、用redux保存当前列表数据状态,注入路由钩子记录页面离开时候DOM节点状态
,在页面加载完上状态数据完毕之后将DOM恢复。
探讨方案三:
效果
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1e618/c5a/d5d40da532c3a782.png)
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1e618/cd5/af17da15769ccb2e.jpeg)
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1eebe/cd5/c72d78d7317a9e8e.webp)
实现代码:
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1eebe/cd5/5287a7b3296ea13e.webp)
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1eebe/cd5/72fd2c126203a875.webp)
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/94ce/a6e/865776f6fe3d5f59.jpeg)
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1eebe/cd5/1e3db12dd78db092.webp)
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1eebe/cd5/8be1ccb5166feb93.webp)
![《React-Redux 恢复列表页跳转明细页之后返回列表状态》](https://img.php1.cn/3cd4a/1eebe/cd5/d67981797265d9c7.webp)