问题背景: 项目中用户总是可能误触到返回按钮，但此时可能并不希望返回，所以需要弹框进行确认操作。
原理：利用history 和 浏览器 刷新popstate状态 去实现
参考资料：https://blog.csdn.net/so12138/article/details/84250196
每一次返回都会去历史记录回退 -1 所以就在进入页面之前 往历史记录里面多记录一次当前页面的链接。然后再回退的时候监听刷新，去做一些事情。
1、挂载完成后，判断浏览器是否支持popstate
// BBBB.vue
mounted(){
// 如果支持 popstate 一般移动端都支持了
if (window.history && window.history.pushState) {
// 往历史记录里面添加一条新的当前页面的url
history.pushState(null, null, document.URL);
// 给 popstate 绑定一个方法 监听页面刷新
window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
}
},
2、页面销毁时，取消监听。否则其他vue路由页面也会被监听
// BBBB.vue
destroyed(){
window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件
},
3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写
methods:{
// BBBB.vue
backChange() {
const that = this;
console.log("监听到了");
}
笔记：
微信关闭页面 ： wx.closeWindow();
微信JS-SDK Demo https://www.weixinsxy.com/jssdk/#menu-smart
history http://www.runoob.com/jsref/obj-history.html
Location 对象属性
length 返回历史列表的网址数量
Location 对象方法
back 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
localtion: http://www.runoob.com/jsref/obj-location.html
Location 对象属性
hash 返回一个URL的锚部分
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL
pathname 返回的URL路径名。
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
search 返回一个URL的查询部分
Location 对象方法
方法 说明
assign() 载入一个新的文档
reload() 重新载入当前文档
replace() 用新的文档替换当前文档
下面代码是符合我自己项目中额外的操作
- 走完上面你已经可以监听一次了，那么怎么执行多次监听呢；那就每次监听到再把当前历史记录赋值一次。
methods:{
// BBBB.vue
backChange() {
const that = this;
console.log("监听到了");
history.pushState(null, null, document.URL);
setTimeout(() => {
that.$vux.confirm.show({
title: "确定离开当前页面？",
hideOnBlur: true,
// 组件除show外的属性
onCancel() {
// "取消操作";
history.pushState(null, null, document.URL);
},
onConfirm() {
that.$router.replace("#/AAAA");
}
});
}, 100);
},
}
- 第四步做完之后 你就会发现用户好像确定跳转回去 AAAA 页面，再次返回又会跳转回 BBBB;
原因呢 跳转之前 多加了一条历史记录。
解决方案：每次跳转到AAAA的时候，history.go()到最开始进入页面的那一条记录。
// AAAA.vue
mounted() {
if( window.history.length > 2 ){
// 在手机上位了返回微信页面
// alert(that.historyText.length)
var ua = navigator.userAgent.toLowerCase();
if ( browser.versions.mobile) {
//判断是否是移动设备打开。browser代码在下面
//最开始进入页面的那一条记录
let textNum = parseInt(window.history.length) - 1;
// alert(textNum)
history.go(-textNum);
} else {
//否则就是PC浏览器打开
location.replace('#/AAAA');
}
}
},
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}