vue、react， router 返回不保留历史访问记录，经验分享

Question

自问自答系列...(实在找不到分享入口在哪，又不想写文章)

场景

常见业务：列表页跳转进入详情页，详情页进入操作页，操作完成后返回列表页，如下图

产生问题：
用户在操作页完成后返回列表页，此时点击返回键会回到操作页，而不是返回首页。这是不可接受的！ 而且列表页多个数据来回跳转，浏览历史记录越来越多，更是不可接受！

简单解决方案

网上都说用router.replace ，本人认为replace只适用于只有一个子页面下或者不需要保留页面的场景；
说下为什么，比如详情页replace到操作页，跳转没有问题，但是在操作页面点击返回后，直接到了列表页了，正常来说操作页返回应该在详情页。
所以结论是replace只适用于一个子页面或者不需要保留的页面。

复杂解决方案

使用 router.go(index) 可以解决此场景问题。
正常页面还是使用 router.push 做跳转，需要返回列表页时，可以判断当前跳转索引是多少，使用 router.go(index)返回。
例如： 列表页-> 详情页-> 操作页，在操作页要返回到列表页，此时go(-2)能解决浏览器不保存历史访问记录问题。多次列表页跳转也不会保留访问记录
不需要跨页面返回还是可以使用router.back()的~
详情页 -> 操作页，用户想返回再检查详情页可以用router.back()返回。

页面携带参数问题处理

本人现在能想到的就是使用sessionStorage存储页面参数，待返回列表页时从sessionStorage取出来做逻辑判断。
也可以使用vuex、redux做状态管理。。

有用就点个赞👍吧