- 业务场景如下:
工作台页 ==> 列表页一(点击返回返回至上一页) ==> 详情页一 (点击返回返回至上一页) ==> 输入信息页一(点击返回返回至上一页) ==> 输入信息页二(点击返回返回至上一页) ==> 详情页一(此时点击返回返回至列表一,在列表页点击返回返回至工作台页。)
-
前置条件
- App需提供给H5自定义返回键的能力。
-
需要掌握的知识点:
-
window.history.length含义是什么?
- MDN释义:history.length只读属性返回一个整数,表示会话历史记录中的元素数,包括当前加载的页。例如,对于加载到新选项卡中的页面,此属性返回1。(可以简单理解为回退到第一个页面的次数减1)
-
window.history.length何时更新?
- 当push进入的时候值会更新,例如:通过a链接、this.$router.push()等。
-
-
解决方案
-
第一步:在返回的指定页的前一页(工作台页)记录,push进入返回的指定页(即上述业务场景的列表页一)时,记录标识:返回的指定页(即上述业务场景的列表页一)是通过push进入的。
-
第二步:在返回的指定页(即上述业务场景的列表页一)中判断如果是通过push进入的记录下来当前的sessionStorage.setItem('startpos', window.history.length)。
-
第三步:重复一、二步骤记录下需要定制返回页面的历史记录位置endpos。
-
第四步:点击返回的时候执行this.$router.go(startpos - endpos)即可。
-