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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue router 动态路由清除方式
May 25 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入门学习知识点三 PHP上传
2011/07/14 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php身份证号码检查类实例
2015/06/18 PHP
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js中function()使用方法
2013/12/24 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
python编写简单爬虫资料汇总
2016/03/22 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
浙大毕业生自荐信
2014/01/26 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS