H5 van-popup全屏弹窗，模拟页面回退效果，支持左上角返回按钮，适用物理返回，侧滑与底部返回键

第一步：
1、定义animateDuration变量
2、定义open事件执行方法selectProjectOpenHandler
3、定义close事件执行方法selectProjectCloseHandler

data () {
    
    return {
    
      animateDuration: 0.3 // 默认弹窗动画时间0.3s
    }
},

第二步：van-popup使用：

<!-- van-popup  -->
 <van-popup 
    v-model="_show" 
    position="right" 
    :overlay="false"
   :style="{ width: '100%', height: '100%' }" 
   :duration="animateDuration" 
    @open="selectProjectOpenHandler" 
    @close="selectProjectCloseHandler">
                    <!-- 弹窗内容 -->
</van-popup>

第三步：
selectProjectOpenHandler：

// popup打开
selectProjectOpenHandler () {
    
  window.history.pushState(null, null, '#') // 模拟新的一页history记录
  window.addEventListener('popstate', this.popstateHandler) //添加popstate事件监听
}
popstateHandler (e) {
    
 	this.animateDuration = 0 // 防止侧滑出现多次动画
  	this._show = false //关闭van-popup
}

selectProjectCloseHandler:

// popup关闭
selectProjectCloseHandler () {
    
    window.removeEventListener('popstate', this.popstateHandler, false)
},

第四步：按钮返回的方法goBack （重要！）

goBack () {
    
  window.history.back() // 删掉van-popup打开时添加的history
  this._show = false
},

效果杠杠的！！！具体的业务需求可以自行调整哈