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


Posted in Vue.js onFebruary 03, 2021

前言

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

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

具体步骤如下:

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浏览器返回监听内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
Vue常用API、高级API的相关总结
Feb 02 #Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
You might like
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
js实现简单的秒表
2020/01/16 Javascript
详解K-means算法在Python中的实现
2017/12/05 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python实战之制作天气查询软件
2019/05/14 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python小白切忌乱用表达式
2020/05/29 Python
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
亮化工程实施方案
2014/03/17 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
基层工作经历证明
2015/06/19 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
Python爬取某拍短视频
2021/06/11 Python
Vue3.0 手写放大镜效果
2021/07/25 Vue.js