解决：vue项目中模态框显示中按手机返回键（或者浏览器回退键）灰屏的问题

问题截图：

解决办法：

1、进入页面后获取当前的url

created() {
	this.firstUrl = window.location.href
},

打开模态框

handleRowClick(){
    $("#motaikuang").modal('show');
               
    //模态框显示之后增加一个历史记录
    window.history.pushState({}, this.firstUrl);//firstUrl为当前页面的url
},

 

2、点击手机系统返回键

mounted() {
    //按返回键时监听模态框是否显示，若显示则关闭
     window.addEventListener("popstate", function(e) {
         if($("body").hasClass("modal-open")){
              $("#motaikuang").modal('hide')
            }
     }, false);
 },

 

3、点击模态框的关闭键

//点击模态框的关闭按钮
 closeModel(){
      $("#motaikuang").modal('hide')
      //因为之前增加一个记录，要回退一步
        window.history.go(-1)
 },