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使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue如何清除浏览器历史栈
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
咖啡语言
2021/03/03 咖啡文化
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
js只执行1次的函数示例
2016/07/20 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
python实现报表自动化详解
2017/11/16 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python reduce函数作用及实例解析
2020/05/08 Python
分享一个python的aes加密代码
2020/12/22 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
教育科学研究生自荐信
2013/10/09 职场文书
就业协议书范本
2014/04/11 职场文书
财务负责人任命书
2014/06/06 职场文书
作风整顿剖析材料
2014/09/30 职场文书
中国合伙人观后感
2015/06/02 职场文书
党风廉政承诺书2016
2016/03/25 职场文书