当前位置 博文首页 > 纸飞机博客：兼容安卓和ios的手机端浏览器返回和物理返回的监听
整个手机端操作流程如下：
首页=>页面A=>页面B/页面C
页面B：弹出个操作框可以点击物理返回键只关闭操作框，不触发页面刷新之类的操作，在操作框没弹出的时候返回能正常返回页面A
页面C：返回能正常返回页面A
详情见下图：
html
<template>
<div class="about">
<h1>页面B</h1>
<button @click="showPopup()">弹</button>
<van-popup style="width:100%;height:100%" :close-on-click-overlay="false" :closeable="true" v-model="isShow" @click-close-icon="closePopup"
> 实际上我只是个弹窗 <br>
这个弹窗你可以自定义一下返回按钮， <br>
或者不留返回按钮只允许物理返回 <br>
应用场景有选择地址，选择收获地址，模拟跳到新的页面等...
</van-popup
>
</div>
</template>
js
<script>
export default {
data() {
return {
isShow: false,
};
},
mounted() {
window.addEventListener(
"popstate",
(e) => {
console.log("e", e);
if (this.isShow) {
//如果弹窗是开着的那么关闭他
this.isShow = false;
}
},
false
);
console.log('刷新了一次页面')
},
methods: {
showPopup() {
//打开弹窗并且插入一条历史记录
this.pushHistory(() => {
this.isShow = true;
});
},
closePopup(){
//如果不是点击物理返回的时候触发
console.log('触发')
history.go(-1)
},
pushHistory(callback) {
// 插入历史记录
let state = {
title: "title",
url: "#aaa",
};
window.history.pushState(state, "title", "#return_back");
if (typeof callback === "function") {
this.$nextTick(() => {
callback();
});
}
},
},
};
</script>https://gitee.com/huqinggui/vue_back.git
cs