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

• 业务场景如下：

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

• 前置条件

  • App需提供给H5自定义返回键的能力。

• 需要掌握的知识点:

  • window.history.length含义是什么？

    • MDN释义：history.length只读属性返回一个整数，表示会话历史记录中的元素数，包括当前加载的页。例如，对于加载到新选项卡中的页面，此属性返回1。（可以简单理解为回退到第一个页面的次数减1）

  • window.history.length何时更新？

    • 当push进入的时候值会更新，例如：通过a链接、this.$router.push()等。

• 解决方案

  • 第一步：在返回指定页的前一页（即上述业务场景的工作台页）在push进入下一页的时候，记录一个状态值：该值表示返回的指定页（即上述业务场景的列表页一）是通过push进入的，例如通过a链接、this.$router.push()等。
  • 第二步：在返回的指定页（即上述业务场景的列表页一）中判断如果是通过push进入的记录下来当前的sessionStorage.setItem('len', window.history.length)。点击返回的时候执行执行this.$router.go(sessionStorage.getItem('len') - window.history.length)即可。

转载于:https://juejin.im/post/5d0ae529e51d4510774a8879