解决Vue2移动端（H5）项目，手机打开项目侧滑或者按物理返回键，始终是走this.$router.go(-1)

一、原因前言

最近开发Vue2移动端（H5）项目，用手机打开项目侧滑或者按物理返回键，始终是走this.$router.go(-1)，即相当于点击了浏览器的返回键的项目。目前想要的效果是：只要回到初始页面，点击返回或者侧滑都应该回到工作台，不应该在一步一步的返回到之前进过的页面。

二、解决办法

需要监听HTML5``window.history的pushState事件来解决

<template><div class="end_judging_scrap_steel"><t-header title="废钢终判" :back="goBack"><template #right><div @click="goToHistory" class="history">历史记录</div></template></t-header></div>
</template>
<script>
export default {name: 'endJudgingScrapSteel',data() {return {}},beforeDestroy() {window.removeEventListener('popstate', this.goBack, false)},mounted() {if (window.history && window.history.pushState) {// 向历史记录中插入了当前页history.pushState(null, null, location.href)window.addEventListener('popstate', this.goBack, false)}},methods: {goBack() {this.$router.push({ path: '/' });}},
};
</script>