整个手机端操作流程如下：
首页=>页面A=>页面B/页面C
页面B：弹出个操作框可以点击物理返回键只关闭操作框，不触发页面刷新之类的操作，在操作框没弹出的时候返回能正常返回页面A
页面C：返回能正常返回页面A
详情见下图：
案例结构
B.vue操作代码
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>
