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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
Vue router配置与使用分析讲解
Dec 24 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
php5 and xml示例
2006/11/22 PHP
PHP面向对象编程快速入门
2006/12/14 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
jQuery.extend 函数详解
2012/02/03 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
django中静态文件配置static的方法
2018/05/20 Python
python解析含有重复key的json方法
2019/01/22 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
暑期社会实践感言
2014/02/25 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
毕业欢送会致辞
2015/07/29 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
PHP遍历数组的6种方式总结
2021/11/17 PHP