当前位置: 首页 > 编程笔记 >

vue浏览器返回监听的具体步骤

强化
2023-03-14
本文向大家介绍vue浏览器返回监听的具体步骤,包括了vue浏览器返回监听的具体步骤的使用技巧和注意事项,需要的朋友参考一下

前言

分享页面时,希望点击浏览器回退按钮,回到项目首页,增加访问量。

需要监听浏览器的回退按钮,并阻止其默认事件。

具体步骤如下:

1、挂载完成后,判断浏览器是否支持popstate

mounted(){
 if (window.history && window.history.pushState) {
 history.pushState(null, null, document.URL);
 window.addEventListener('popstate', this.goBack, false);
 }
},

2、页面销毁时,取消监听。否则其他vue路由页面也会被监听

destroyed(){
 window.removeEventListener('popstate', this.goBack, false);
},

3、将监听操作写在methods里面,removeEventListener取消监听内容必须跟开启监听保持一致,所以函数拿到methods里面写

methods:{
 goBack(){
 this.$router.replace({path: '/'});
 //replace替换原路由,作用是避免回退死循环
 }
}

附:popstate用来做什么的?

popstate的怎么用?

HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。

pushState、replaceState两者用法差不多。

使用方法

history.pushState(data,title,url);
//其中第一个参数data是给state的值;第二个参数title为页面的标题,但当前所有浏览器都忽略这个参数,传个空字符串就好;第三个参数url是你想要去的链接;

replaceState用法类似,例如:history.replaceState("首页","",location.href+ "#news");

总结

到此这篇关于vue浏览器返回监听的文章就介绍到这了,更多相关vue浏览器返回监听内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍Java-JFrame-swing嵌套浏览器的具体步骤,包括了Java-JFrame-swing嵌套浏览器的具体步骤的使用技巧和注意事项,需要的朋友参考一下 一、使用swing嵌套浏览器要实现的功能: 通过java的swing实现在一个窗体中嵌套一个浏览器,可以在这个浏览器中将另一个项目的内容显示出来,只需要回去另一个项目首页的url即可,这样另一个项目就可以在swing嵌套的浏览器

  • 本文向大家介绍JavaScript监听和禁用浏览器回车事件实例,包括了JavaScript监听和禁用浏览器回车事件实例的使用技巧和注意事项,需要的朋友参考一下 js监听浏览器回车事件,可以支持ie6+,火狐,谷歌等浏览器。 那么,如何捕捉指定DOM对象的回车事件?这里以input标签为例说明: 那么,js如何禁用浏览器回车事件?我们知道,在HTML表单区域内,按回车时浏览器的默认行为是自动提交表单

  • 我的需求: 先从列表=>详情页 如果在详情页点击的返回按钮,则读取之前缓存的历史数据 (在详情页刷新后再点击返回,也符合条件) 此时的返回包括: 浏览器的返回按钮 页面中的按钮(调用router.back()/go(-1)等路由方法) 要如何全局判断用户进行了返回操作呢?

  • 2.返回按钮的点击监听 在聊窗顶部有一个返回按钮,在返回时可以添加其他事件,使用的接口如下: Ntalker.getInstance().setOnBackBtnListener(new OnBackBtnClickListener() { @Override public void OnBackBtnClick() { Toast.make

  • 问题内容: 我想让主体具有浏览器高度的100%。我可以使用CSS吗? 我尝试设置,但不起作用。 我想为页面设置背景色以填充整个浏览器窗口,但是如果页面内容很少,我将在底部看到一个难看的白色条。 问题答案: 尝试将html元素的高度也设置为100%。 Body向其父级(HTML)寻求如何缩放动态属性,因此HTML元素也需要设置其高度。 但是,身体的内容可能需要动态更改。将最小高度设置为100%将实现

  • 在与JMS合作的过程中,我有一个疑问。据我所知,创建同步消息消费者是可能的。但是,我必须以一定的频率启动它,因为事实上没有侦听器。接下来,为了同步使用队列中的消息,我可以创建一个MDB并将池设置为1。我认为这不是一个好的解决办法。 我的目标是在消息出现在队列中时同步地使用它们。从我的观点来看,上述解决方案并不好:1。不时推出的消费者。2.MDB(通常异步)和池设置为1。 有什么适合我的解决方案吗?