如何在App内嵌vue中自定义返回

590 阅读1分钟
  • 业务场景如下:

工作台页 ==> 列表页一(点击返回返回至上一页) ==> 详情页一 (点击返回返回至上一页) ==> 输入信息页一(点击返回返回至上一页) ==> 输入信息页二(点击返回返回至上一页) ==> 详情页一(此时点击返回返回至列表一,在列表页点击返回返回至工作台页。)

  • 前置条件

    • 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)即可。