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防抖与节流
Nov 24 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 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
PHP安全技术之 实现php基本安全
2010/09/04 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
javascript demo 基本技巧
2009/12/18 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python 自定义对象的打印方法
2019/01/12 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
给儿子的表扬信
2014/01/15 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
企业申诉管理制度
2014/01/30 职场文书
机械系毕业生求职信
2014/05/28 职场文书
大学生工作求职信
2014/06/23 职场文书
殡葬服务心得体会
2014/09/11 职场文书
校车安全管理责任书
2015/05/11 职场文书
党纪处分决定书
2015/06/24 职场文书