vue如何清除浏览器历史栈

目录
  • 如何清除浏览器历史栈
    • 问题
  • vue返回首页后如何清空路由
    • 需求一：从首页点击路由到A页面
    • 需求二：把浏览器的记录返回指定的页面

如何清除浏览器历史栈

问题

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

//可以拿到历史记录栈，清空栈
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);
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目强制清除页面缓存的例子

    异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只有后端返回 expires 或 Cache-Control:max-age=XXX, 前端才缓存. 但在浏览器中,默认会对 html css js 等静态文件.以及重定向进行缓存,如果在HEAD头中指定: <HEAD> <METAHTTP-EQUIV="Pragma"CO

  • vue 关闭浏览器窗口的时候,清空localStorage的数据示例

    如果是用vue做的单页面程序的时候,将监听的方法放在App.vue是最灵活的 <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo

  • vue如何清除浏览器历史栈

    目录 如何清除浏览器历史栈 问题 vue返回首页后如何清空路由 需求一:从首页点击路由到A页面 需求二:把浏览器的记录返回指定的页面 如何清除浏览器历史栈 问题 需要跳转好几个页面进行表单提交,提交完之后,跳转回首页,返回上一页,发现还可以返回上一级页面路由 //可以拿到历史记录栈,清空栈 let routeHistory=history.length-1; this.$router.go(-routeHistory); vue返回首页后如何清空路由 需求一:从首页点击路由到A页面 A页面点击路

  • Vue如何解决每次发版都要强刷清除浏览器缓存问题

    目录 每次发版都要强刷清除浏览器缓存问题 原理 vue 强制清除浏览器缓存 (1)最基本的方法就是 (2)在html文件中加入meta标签 (3)需要后端陪着,进行nginx配置 (4)在脚本加载时加入一个时间戳 每次发版都要强刷清除浏览器缓存问题 原理 将打包后的js和css文件,加上打包时的时间戳 1.index.html 在 public 目录下的index.html文件里添加如下代码: <meta http-equiv="pragram" content="no

  • vue 部署上线清除浏览器缓存的方式

    vue 部署上线清除浏览器缓存的方式

    目录 部署上线清除浏览器缓存 修改根目录index.html 配置 nginx 不缓存 html 打包的文件路径添加时间戳 vue项目部署,清理缓存方式 部署上线清除浏览器缓存 vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存.这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存. 下面是我的解决方案: 修改根目录index.html 在 head 里面添加下面代码 <meta http-equiv="pragram" content=&

  • vue实现微信浏览器左上角返回按钮拦截功能

    [需求] 在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好.但看到京东购物公众号上的效果却实现得非常好,所以自己也开始了这方面的尝试.京东的效果如下图: 从上图京东购物效果上来看,在点击搜索拉起一个搜索界面,然后点击左上角反回,只是将搜索界面收起,而页面没有重新像读取进度条一样去返回,而我页面需要的正是这样的效果,下面就用vue来做一个这个过程的 demo 吧. [前提] 微信左上角的返回按钮其实无

  • Vue顶部tags浏览历史的实现

    Vue顶部tags浏览历史的实现

    目录 废话 实现的功能 正文 重点 废话 demo预览 实现的功能 默认有首页,不能关闭 点击路由菜单,判断有无存在,没有就添加,有就定位到上面 点击跳转,点击X可关闭 关闭当前页,自动跳到下一个tag页面 如果当前页在最后一个,默认跳到上一个tag页面 右键菜单,刷新,关闭右侧,关闭所有 动态判断tags长多,放不下时,出现左右两侧按钮,减少时自动消失 动态判断窗口放大缩小,自动判断有无左右两侧按钮 正文 不用任何vuex,乱七八糟的方法,全在一个文件,粘贴即用 放到你想要的位置即可(此dem

  • Vue 插件及浏览器本地存储

    Vue 插件及浏览器本地存储

    目录 插件 localstorage SessionStorage 总结 TodoList 改为本地存储 插件 功能:插件通常用来为 Vue 添加全局功能 本质:包含 install 方法的一个对象,install 的第一个参数是 Vue,第二个以后的参数是插件使用者传递的数据 定义插件:vue官网是这样描述的:Vue.js 的插件应该暴露一个 install 方法.这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象 对象.install = function(Vue,opt

  • ASP.NET网站管理系统退出 清除浏览器缓存,Session的代码

    1.在系统登陆成功时记录登陆的用户名.密码等信息(登陆功能的部分代码) 复制代码 代码如下: Session["id"] = user.id.ToString(); Session["name"] = user.name.ToString(); Session["pwd"] = user.password.ToString(); Session["time"] = user.LoginTime.ToString(); Sess

  • 清除浏览器缓存的几种方法总结(必看)

    关于浏览器缓存 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的.今天主要介绍清除缓存的几种方法. 清理网站缓存的几种方法 meta方法 //不缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-

  • Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. 第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的 后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个 方法,就是利用BufferedImage这个类. 开始 首先说说我的思路,就是把本地的图片,加载到内存

  • js清除浏览器缓存的几种方法

    关于浏览器缓存 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的.今天主要介绍清除缓存的几种方法. 清理网站缓存的几种方法 meta方法 //不缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-

随机推荐