在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 相关文章推荐
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue 动态表单开发方法案例详解
Dec 02 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
深入apache host的配置详解
2013/06/09 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python中的choice()方法使用详解
2015/05/15 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
考生诚信考试承诺书
2014/05/23 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
社会实践单位意见
2015/06/05 职场文书
阿凡达观后感
2015/06/10 职场文书
格林童话读书笔记
2015/06/30 职场文书
九九重阳节致辞
2015/07/31 职场文书
课程设计感想范文
2015/08/11 职场文书