vue中在使用keep-alive时，会出现在页面跳转后el-tooltip或el-dropdown不消失的问题以及解决方法

zqhs5599

已于 2023-07-26 11:31:38 修改

阅读量1.8k

点赞数 2

文章标签：前端 css js vue

于 2023-07-26 11:30:18 首次发布

本文链接：https://blog.csdn.net/zqhs5599/article/details/131934934

版权

文章讲述了在Vue应用中，由于使用keep-alive进行页面缓存，导致tooltip和dropdown在页面切换后仍然显示的问题。提出了三种解决方案，包括在deactivated生命周期中销毁、路由守卫中移除或者在App.vue中监听路由切换。并以路由守卫为例提供了具体的实现代码。

摘要由CSDN通过智能技术生成

一、问题复现

跳转前：

在这里插入图片描述

跳转后：

二、分析

由于在vue中使用了keep-alive，页面在切换时，上一个页面的实例被缓存了，跳转后并没有销毁，所以才会残留 tooltip或dropdown，所以有以下解决思路：
1、keep-alive会多出两个生命周期，我们可以在deactivated中销毁当前页面中所有的tooltip或dropdown；
2、在路由守卫中，在页面跳转时都会执行这里的代码，然后移除即可；
3、在App.vue中，监听路由切换事件，然后移除即可。
…
其中2、3比较好，可以只写一处代码，就可实现整个项目都能移除el-tooltip或el-dropdown的功能。

三、解决

以路由守卫为例：

router.beforeEach((to, from, next) => {
  try {
    let tooltipList = document.getElementsByClassName('el-tooltip__popper')
    for (let tip in tooltipList) {
      let tipItem = tooltipList[tip]
      if (typeof tipItem == 'object') {
        tipItem.style.display = 'none'
      }
    }
  } catch (error) {
    console.log('error--tooltip', error)
  }
  try {
   const allTooltips = document.querySelectorAll('.el-tooltip__popper')
   if (allTooltips.length) {
   	Array.from(allTooltips).map((node) => document.body.removeChild(node))
   }
  } catch (error) {
    console.log('error--dropdown', error)
  }
})

写法上有多种，还有更多在这就不写了，希望对你有帮助