一、问题描述
页面A中包含列表数据,每条列表最后一栏【更多】是el-dropdown
实现的下拉框,点击其中一项,路由跳转到页面B。
问题 :跳转页面B后,发现页面A中的el-dropdown
内容,有时会在页面左上角一直显示。如下图:
页面B左上角,显示页面A的dropdown元素:
二、解决办法:
- 在
页面A
,给dropdown组件设置一个class类名,便于后续操作:
- 在
页面B created
周期中,手动将所有dropdown元素隐藏/移除 (因为我这里是嵌套在micro-app中不便移除,所以采用的隐藏):
Tips:
如果想要 路由跳转时 全局隐藏/删除所有dropdown元素,可以如下操作:
- 使用路由守卫,监听路由跳转时 隐藏/删除;
- 在 App.vue 中监听路由跳转;
三、问题分析
项目使用keep-alive
做了组件缓存,跳转到页面B时,页面A的实例会被缓存,并不会被销毁。
其中的dropdown元素也会残留在body元素上(挂载到body是element默认行为)