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

一、原因前言

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

二、解决办法

需要监听HTML5``window.historypushState事件来解决

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>
相关推荐
码上暴富1 小时前
axios请求的取消
前端·javascript·vue.js
tager2 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
海天胜景6 小时前
vue3 el-table 去除小数 并使用千分号
javascript·vue.js·elementui
漫天星梦6 小时前
Vue2项目搭建(Layout布局、全局样式、VueX、Vue Router、axios封装)
前端·vue.js
星光不问赶路人7 小时前
TypeScript 模块扩展
vue.js·typescript
柏成8 小时前
qiankun 微前端框架🐳
前端·javascript·vue.js
天下无贼11 小时前
【轮播图】H5端轮播图、横向滑动、划屏效果实现方案——Vue3+CSS position
css·vue.js
泉城老铁12 小时前
Spring Boot + Vue + ZLMediaKit 实现 RTSP 拉流播放的完整方案
java·vue.js·音视频开发
花菜会噎住12 小时前
Vue3核心语法进阶(生命周期)
前端·javascript·vue.js·生命周期
前端开发爱好者14 小时前
Vue3 "抛弃" Axios !用上了 专属请求库!
前端·javascript·vue.js