解决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>
相关推荐
qq_456001651 小时前
在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
前端·javascript·vue.js
可爱的秋秋啊4 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
HED7 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
清风细雨_林木木8 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ9 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了9 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
神仙别闹11 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
HuaHua的世界13 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
H5开发新纪元13 小时前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
icefiresong2415 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js