Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭

大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

---

重现步骤如下：

1. 打开使用el-dialog编写的弹框
2. 点击浏览器的回退按钮
   

现象：弹框的遮罩层没有关闭

解决办法：
根据官网文档可知，在弹框中添加如下代码即可解决
:modal-append-to-body = “false”

原因分析：官方文档的说明入下图

Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。通过属性modal-append-to-body控制下面这行代码是插入至body元素之上，还是插入在使用el-dialog的父元素上。

<div class="v-modal" tabindex="0" style="z-index: 2032;"></div>

由于默认是true，即插入在body元素之上。而Vue建立的项目是单页面项目，整个项目总共就只有一个页面。因此按照复现步骤操作，弹框没有点击关闭，body