操作H5手机端底部webview自带返回

相关基础知识

vue组件的生命周期

vue生命周期

浏览器历史记录

popstate: 当活动历史记录条目更改时，将触发该事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
history.pushState()：添加历史记录条目
history.replaceState()：修改历史记录条目
注意：
调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）。
pushState() 绝对不会触发 hashchange 事件，即使新的URL与旧的URL仅哈希不同也是如此。

流程

不能依赖vue的生命周期，需要配合监听浏览器的popstate，和使用pushState完成

// 添加一条返回跳转的历史记录
window.history.pushState(stateObj, title, url);
// 触发返回的时候直接跳转到希望跳转的页面
window.onpopstate = () => {
  this.$router.push({ path: url, query:  *** });
};

手速快连续点击两次返回，还是能保持不变需要配合生命周期来做了

// 在销毁前根据query字段判断
beforeDestroy() {
  this.$router.push({ path: url, query:  *** });
}