在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 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 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
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
用tensorflow实现弹性网络回归算法
2018/01/09 Python
python框架flask表单实现详解
2019/11/04 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
单位绩效考核方案
2014/05/11 职场文书
法院授权委托书范文
2014/08/02 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL