广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何清除浏览器历史栈
  • 829
分享到

vue如何清除浏览器历史栈

2024-04-02 19:04:59 829人浏览 八月长安
摘要

目录如何清除浏览器历史栈问题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);
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何清除浏览器历史栈

本文链接: https://www.lsjlt.com/news/149665.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何清除浏览器历史栈
    目录如何清除浏览器历史栈问题vue返回首页后如何清空路由需求一:从首页点击路由到A页面需求二:把浏览器的记录返回指定的页面如何清除浏览器历史栈 问题 需要跳转好几个页面进行表单提交,...
    99+
    2022-11-13
  • vue怎么清除浏览器历史栈
    这篇文章主要介绍“vue怎么清除浏览器历史栈”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么清除浏览器历史栈”文章能帮助大家解决问题。如何清除浏览器历史栈问题需要跳转好几个页面进行表单提交,...
    99+
    2023-06-30
  • php如何清除历史
    这篇文章将为大家详细讲解有关php如何清除历史,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。php清除历史的方法:1、创建一个PHP示例文件;2、通过setcookie设置cookie;3、通过“echo...
    99+
    2023-06-22
  • Vue如何实现顶部tags浏览历史
    这篇文章主要为大家展示了“Vue如何实现顶部tags浏览历史”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue如何实现顶部tags浏览历史”这篇文章吧。废话demo预览实现的功能默认有首页,不...
    99+
    2023-06-22
  • 怎么删除电脑浏览器的历史记录
    要删除电脑浏览器的历史记录,可以按照以下步骤操作:Google Chrome浏览器:1. 打开Chrome浏览器。2. 点击右上角的...
    99+
    2023-09-11
    电脑
  • windows ie浏览器如何清除浏览器缓存
    本篇内容主要讲解“windows ie浏览器如何清除浏览器缓存”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“windows ie浏览器如何清除浏览器缓存”吧!ie浏览器清除浏览器缓存的方法:首先...
    99+
    2023-07-02
  • windows edge浏览器历史记录如何恢复
    这篇文章主要介绍了windows edge浏览器历史记录如何恢复的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇windows edge浏览器历史记录如何恢复文章都会有所收获,下面我们一起来看看吧。edge浏览器...
    99+
    2023-07-01
  • win8如何清除浏览器缓存
    这篇文章主要介绍了win8如何清除浏览器缓存的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇win8如何清除浏览器缓存文章都会有所收获,下面我们一起来看看吧。win8清除浏览器缓存的方法1、打开浏览器之后点击上方...
    99+
    2023-07-04
  • 电脑如何清除浏览器缓存
    这篇文章主要介绍“电脑如何清除浏览器缓存”,在日常操作中,相信很多人在电脑如何清除浏览器缓存问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”电脑如何清除浏览器缓存”的疑惑有所帮...
    99+
    2022-12-01
    电脑
  • Win10如何清除浏览记录
    要清除Windows 10上的浏览记录,可以按照以下步骤操作:1. 打开你使用的浏览器。2. 在浏览器的右上角点击菜单按钮,通常是一...
    99+
    2023-08-22
    Win10
  • win7系统如何清除浏览器缓存
    这篇文章主要介绍了win7系统如何清除浏览器缓存,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。以IE浏览器为例,在浏览器的菜单栏中点击工具,然后点击“internet选项”;...
    99+
    2023-06-28
  • windows edge浏览器pdf批注如何清除
    这篇文章主要介绍“windows edge浏览器pdf批注如何清除”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“windows edge浏览器pdf批注如何清除”文章能帮助大家解决问题。edge浏览...
    99+
    2023-07-01
  • Win8.1如何清除可靠性历史记录关闭历史记录功能
      最近几代的Windows系统都有个可靠性历史记录的功能,它是按一定的规则对系统过去状态进行评分。有的人讨厌这个功能,想把它关闭。不过这个功能无法关闭,只能清除记录。   按照以下方法来清除可靠性历史记录...
    99+
    2022-06-04
    历史记录 可靠性 功能
  • win10系统中如何清除浏览器缓存
    小编给大家分享一下win10系统中如何清除浏览器缓存,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!打开浏览器,点击右上角的图标选择开始菜单进行设置。点击选择要清除...
    99+
    2023-06-27
  • vue部署上线清除浏览器缓存的方式
    目录部署上线清除浏览器缓存修改根目录index.html配置 nginx 不缓存 html打包的文件路径添加时间戳vue项目部署,清理缓存方式部署上线清除浏览器缓存 vue 项目打包...
    99+
    2022-11-13
    vue 部署上线 vue清除浏览器缓存 vue浏览器缓存
  • Win8 IE浏览器如何查看历史记录有哪些方法
      使用IE浏览器上网是国内多数网民的一个习惯。IE浏览器的众多功能中,查看历史记录是其中较为实用的一个。下面小编以Win8系统为例,告诉大家查看IE浏览器历史记录的两个方法。   方法一   点击五角星按...
    99+
    2022-06-04
    历史记录 浏览器 方法
  • win7如何快速清除浏览器缓存和cookies
    本文小编为大家详细介绍“win7如何快速清除浏览器缓存和cookies”,内容详细,步骤清晰,细节处理妥当,希望这篇“win7如何快速清除浏览器缓存和cookies”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。点...
    99+
    2023-06-28
  • 如何清除浏览器中的301跳转记录
    清除浏览器中301跳转记录的方法:打开浏览器设置。找到“隐私设置与安全性”。点击“清除浏览数据”。选中“浏览记录”,最后点击“清除数据”即可。...
    99+
    2022-10-05
  • css中如何能清除浏览器默认样式
    小编给大家分享一下css中如何能清除浏览器默认样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   css清除浏览器默认样式...
    99+
    2022-10-19
  • 如何进行管理浏览历史的Chrome扩展History 2
    这篇文章给大家介绍如何进行管理浏览历史的Chrome扩展History 2,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Chrome的历史记录会按照日期把你所有看过的网页都列出来,尽管你可以通过搜索来查找,但看着还是闹...
    99+
    2023-06-16
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作