vue如何清除浏览器历史栈

 更新时间:2022年05月25日 10:51:31   作者:weixin_45108907  
这篇文章主要介绍了vue如何清除浏览器历史栈,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

如何清除浏览器历史栈

问题

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

//可以拿到历史记录栈,清空栈
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使用canvas手写输入识别中文

    vue使用canvas手写输入识别中文

    这篇文章主要介绍了vue使用canvas手写输入识别中文,工作时遇到一些项目如:系统上的输入法使用不方便,客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧
    2021-11-11
  • vue关闭浏览器退出登录的实现示例

    vue关闭浏览器退出登录的实现示例

    本文主要介绍了vue关闭浏览器退出登录,一般都是根据根据beforeunload和unload这两个事件执行的。本文就详细的介绍一下如何实现,感兴趣的可以了解一下
    2021-12-12
  • Vue动态组件实现异常处理方法

    Vue动态组件实现异常处理方法

    Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • Win11&Win10配置vue开发环境详细图文教程

    Win11&Win10配置vue开发环境详细图文教程

    目前前端三大框架(vue、react、angular)中vue是前端工程师经常使用的,在使用之前需要搭建vue开发环境,这篇文章主要给大家介绍了关于Win11&Win10配置vue开发环境的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue3 微信扫码登录及获取个人信息实现的三种方法

    vue3 微信扫码登录及获取个人信息实现的三种方法

    本文主要介绍了vue3 微信扫码登录及获取个人信息实现的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue-cli初始化项目中使用less的方法

    vue-cli初始化项目中使用less的方法

    vue-cli 是 vue.js 的脚手架工具,可以帮助我们编写基础代码、快速搭建开发环境。下面这篇文章主要给大家介绍了关于vue-cli初始化项目中使用less的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起看看吧
    2018-08-08
  • vue项目初始化到登录login页面的示例

    vue项目初始化到登录login页面的示例

    今天小编就为大家分享一篇vue项目初始化到登录login页面的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vite打包项目后图片丢失的简单解决方法

    Vite打包项目后图片丢失的简单解决方法

    vue项目完成打包上线的时候很多人都会碰到静态资源找不到的情况,下面这篇文章主要给大家介绍了关于Vite打包项目后图片丢失的简单解决方法,需要的朋友可以参考下
    2023-05-05
  • vue2中如何使用swiper@5.4.5

    vue2中如何使用swiper@5.4.5

    这篇文章主要介绍了vue2中如何使用swiper@5.4.5问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    vue+springboot前后端分离实现单点登录跨域问题解决方法

    这篇文章主要介绍了vue+springboot前后端分离实现单点登录跨域问题的解决方法,需要的朋友可以参考下
    2018-01-01

最新评论