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-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
10款实用的PHP开源工具
2015/10/23 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP反射学习入门示例
2019/06/14 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
Python中列表元素转为数字的方法分析
2016/06/14 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python的flask框架难学吗
2020/07/31 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Python常用断言函数实例汇总
2020/11/30 Python
员工年终演讲稿
2014/01/03 职场文书
门诊手术室工作制度
2014/01/30 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
具结保证书
2015/01/17 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
react antd实现动态增减表单
2021/06/03 Javascript