在vue项目中利用popstate处理页面返回的操作介绍


Posted in Javascript onAugust 06, 2020

需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面。

原理:利用history和浏览器刷新popstate状态

实现:

1、在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址), 注意:IOS版的微信,是会立即触发popstate事件,所以需要pageshow做下处理,(当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作,同时也会在onload 事件触发后初始化页面时触发))

在vue项目中利用popstate处理页面返回的操作介绍

2、在methods里定义监听操作函数

在vue项目中利用popstate处理页面返回的操作介绍

3、页面销毁时,取消监听。(注意:一定要取消监听,否则其他vue路由页面也会被监听)

在vue项目中利用popstate处理页面返回的操作介绍

补充知识:vue项目监测浏览器返回按钮

在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

简单介绍history中的操作

window.history.back(),后退

window.history.forward(),前进

window.history.go(num),前进或后退指定数量历史记录

window.history.pushState(state,title,url),在页面中穿件一个history实体。直接添加到历史记录中。参数: state:储存一个对象,可以添加相关信息,可以使用history.state读取其中的内容。title: 历史记录的标题,url:创建的历史记录rul,进行历史记录操作时会跳转到该链接。

window.history.replaceState(),修改当前的history实体。

popstate事件,history实体改变时触发事件

window.history.state,会获得history实体中的state对象。

使用方法

取消默认的返回操作

添加一条history实体作为替代原来的history实体

mounted () {
 if(window.history&&window.history.pushState){
 history.pushState(null,null,document.URL)
 window.addEventListener('popstate', this.goBack, false);
 }
},
destroyed(){
 window.removeEventListener('popstate',this.goBack,false);
},
methods:{
 goBack(){
 this.$router.replace({path:'/'});
 //replace替换原路由,作用是避免回退死循环
 }
}

以上这篇在vue项目中利用popstate处理页面返回的操作介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 #Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 #Javascript
Vue Router中应用中间件的方法
Aug 06 #Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 #Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 #Javascript
如何利用javascript接收json信息并进行处理
Aug 06 #Javascript
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
paypal即时到账php实现代码
2010/11/28 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
php简单中奖算法(实例)
2017/08/15 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
js 触发select onchange事件代码
2014/03/20 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python实现的下载网页源码功能示例
2017/06/13 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python中的asyncio代码详解
2019/06/10 Python
python版百度语音识别功能
2019/07/09 Python
使用python去除图片白色像素的实例
2019/12/12 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
与UNIX有关的几个名词
2015/09/17 面试题
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2015年教学工作总结
2015/04/02 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
求职信如何撰写?
2019/05/22 职场文书