解决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 小时前
bun + vite7 的结合,孕育的 Robot Admin 【靓仔出道】(二十)终章
前端·javascript·vue.js
百锦再1 小时前
.NET + Vue 基于 WebSocket 的聊天室全面实现
vue.js·websocket·rabbitmq·.net·chat·message
JIngJaneIL2 小时前
家庭事务管理系统|基于java和vue的家庭事务管理系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·家庭事务管理系统
掘金012 小时前
基于 Element Plus 的文件上传组件设计与实现
vue.js
前端小巷子4 小时前
深入 Vue3 computed
前端·vue.js·面试
yqcoder4 小时前
vue2 和 vue3 生命周期的区别
前端·javascript·vue.js
叫我阿柒啊13 小时前
Java全栈开发面试实战:从基础到微服务架构
java·vue.js·spring boot·redis·git·full stack·interview
nyf_unknown17 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
前端赵哈哈19 小时前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
风中凌乱的L19 小时前
vue 一键打包上传
前端·javascript·vue.js