解决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>
相关推荐
Keepreal4964 分钟前
使用Canvas绘制转盘
javascript·vue.js·canvas
ScriptBIN18 分钟前
Javaweb--Vue
前端·vue.js
前端Hardy26 分钟前
Vue 高效开发技巧合集:10 个实用技巧让代码简洁 50%+,面试直接加分!
前端·javascript·vue.js
@大迁世界4 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
二十雨辰4 小时前
vite与ts的结合
开发语言·前端·vue.js
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 25 - Watch:清理 SideEffect
前端·javascript·vue.js
我的div丢了肿么办4 小时前
vue3使用h函数如何封装组件和$attrs和props的区别
前端·javascript·vue.js
我的写法有点潮5 小时前
竟然被element-plus背刺了
前端·javascript·vue.js
岁月宁静5 小时前
AI 聊天消息长列表性能优化:后端分页 + 前端虚拟滚动
前端·vue.js·人工智能
Olrookie5 小时前
若依前后端分离版学习笔记(十九)——导入,导出实现流程及图片,文件组件
前端·vue.js·笔记