vue如何清除浏览器历史栈


Posted in Vue.js onMay 25, 2022

如何清除浏览器历史栈

问题

需要跳转好几个页面进行表单提交,提交完之后,跳转回首页,返回上一页,发现还可以返回上一级页面路由

//可以拿到历史记录栈,清空栈
let routeHistory=history.length-1;
this.$router.go(-routeHistory);

vue返回首页后如何清空路由

需求一:从首页点击路由到A页面

  • A页面点击路由到B页面
  • B页面点击路由到C页面
  • C页面点击路由链接到D页面
  • D页面有个返回首页按钮

那么问题来了

点击返回首页后,再点击手机的返回键 会打开D页面 再按手机返回键 会打开C页面,依次类推,

如何才能实现点击返回首页后,清空路由呢

mounted () {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("点击了浏览器的返回按钮");
        sessionStorage.clear();
        window.history.back();
    },
} 

禁止有返回记录

mounted () {
    if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("点击了浏览器的返回按钮");
        history.pushState(null, null, document.URL);
    },
} 

需求二:把浏览器的记录返回指定的页面

mounted 中:
 if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", _this.onClickLeft, false);  //_this.onClickLeft是返回的点击事件
    }
 methods: {
    onClickLeft() {
    //   this.$route.query.radio支付页面到指定页面传的参数 来判断他的路由
      if (this.$route.query.radio == 1 || this.$route.query.radio == 2) {
        this.$router.push({ //返回指定页面
        });
      } else {
        this.$router.go(-1);  // 正常返回
      }
    },
// 将事件清除掉
 destroyed() {
    window.removeEventListener("popstate", this.onClickLeft, false);
  }
Vue.js 相关文章推荐
Vue 的 v-model用法实例
Nov 23 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue3不同环境下实现配置代理
May 25 #Vue.js
vue使用element-ui按需引入
May 20 #Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 #Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 #Vue.js
Vue组件化(ref,props, mixin,.插件)详解
vue postcss-px2rem 自适应布局
May 15 #Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
php学习 字符串课件
2008/06/15 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php文件系统处理方法小结
2016/05/23 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
python 文件转成16进制数组的实例
2018/07/09 Python
python制作简单五子棋游戏
2019/06/18 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Python tkinter和exe打包的方法
2020/02/05 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
护士自我介绍信
2014/01/13 职场文书
《泉水》教学反思
2014/04/11 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python