一、原因前言
最近开发Vue2移动端(H5)项目,用手机打开项目侧滑或者按物理返回键,始终是走this.$router.go(-1),即相当于点击了浏览器的返回键的项目。目前想要的效果是:只要回到初始页面,点击返回或者侧滑都应该回到工作台,不应该在一步一步的返回到之前进过的页面。
二、解决办法
需要监听
HTML5``window.history
的pushState
事件来解决
html
<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>