浅记组件缓存问题

需求

页面A 弹窗C 表单填写之后在弹窗上点击预览跳转到
页面B 预览表单生成的PDF
回到A 实际：自动刷新页面，期望：不要刷新页面，并且保持弹窗C存在

思路：

1. 在页面A/B判断路由方式决定是否重新刷新页面 但是无法解决组件销毁导致的弹窗消失 pass
2. 使用vue keep-alive 将页面A缓存，这样回到A页面还是之前的组件，不会销毁与重建组件，弹窗继续保持

遇到问题1

加了keep-alive没有生效，页面依然刷新
原因：组件name要和include参数都存在且一致才能生效

 <keep-alive include="taskList">
       <router-view></router-view>
    </keep-alive>

export default {
  name: "taskList",/*此处的name必须有且与include中的一致*/
},

遇到问题2

由于弹窗C，导致组件A缓存成功后，因为弹窗的遮罩层在Body最外层节点，
跳转到B页面，遮罩依然存在

解决办法：el-dialog 有个选项 modal-append-to-body 默认是true，改为false 即可解决