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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
javascript 节点排序 2
2011/01/31 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
大学本科毕业生的自我鉴定
2013/11/26 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
学校三节实施方案
2014/06/09 职场文书
领导干部对照检查材料
2014/08/24 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年清明节活动总结
2015/02/09 职场文书