携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情
1. 问题复现
在这篇文章里面我描述了一个场景:从A页面跳转到B页面,为了页面复用。从A页面跳转至B页面时需要携带不同的参数,显示不同的详情。问题是:带入第一个参数的时候,详情正确展示,返回再次携带别的参数尽然还会显示第一次的详情,和我预想的完全不一样
A页面
B页面对应不同的详情
经历了一段时间的寻找,导致这种情况的代码是
2. 问题思考
因为这个项目当时在技术选型的时候 不知道为啥纯H5要用uniapp开发
我当时接手这个项目的时候,因为习惯使用vue,而且uniapp也支持vue语法,所以在页面跳转的时候自然而然的时候用this.$router.push,于是就自然而然的跳进了自己挖的坑里😂,具体为什么使用this.$router.push从A页面跳转到B页面返回A页面携带不同参数再次进入B页面还会显示第一次的详情,我猜测这个可能和uniapp的框架有关
3. 问题解决
使用uni.navigateTo 跳转页面就完全可以避免刚才的问题
4. 基于用户使用效果的思考
如果使用uni.navigateTo,在两个页面之间来回切换,跳转的所有步骤都会记录在浏览器的history中,比如在A页面跳转到B页面,B页面和C页面来回跳转超过两次以上。再次回到B页面 此时想通过浏览器的返回按钮返回到A页面 是做不到的,只会返回C页面 无论是h5还是小程序都存在这个问题。
5. 基于用户考虑选择正确的页面跳转方式
uni.navigateTo 离开当前页面进入新页面 会进入浏览器的history
uni.redirectTo 关闭当前页面进入新页面 不会进入浏览器的history
所以基于第4点,如果想做到不论是什么时候从B页面返回都是返回到A页面 ,就可以在B和C页面切换的时候采用uni.redirectTo ,A页面进入B页面采用uni.navigateTo
6. 其他问题
在开发微信小程序的时候,如果使用navigateTo跳转页面 如果频次超过10次 就会失效, 这个是微信小程序自己的设定