中山网站建设如何,成都旅游网站,济南优化推广网站seo,企业网站建设如何做好外链建设一、 问题复现
跳转前#xff1a; 跳转后#xff1a;
二、分析
由于在vue中使用了keep-alive#xff0c;页面在切换时#xff0c;上一个页面的实例被缓存了#xff0c;跳转后并没有销毁#xff0c;所以才会残留 tooltip或dropdown#xff0c;所以有以下解决思路 跳转后
二、分析
由于在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)}
})写法上有多种还有更多在这就不写了希望对你有帮助
