解决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 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
会发光的猪。4 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客5 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
周全全5 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ6 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六6 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保6 小时前
el-table 多选改成单选
javascript·vue.js·elementui