vue 切换路由不重新渲染（解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题）

问题复现：

正常状态下：

切换到其他页面再切换回来：

问题解决：

其实这个问题的解决方式官网写得清清楚楚  
    
    
    
，我们看看官网怎么解决的：

接下来我用代码解释下这句话（正确的做法是

     


     


     


，在图表容器被销毁之后 




 




 




 ，调用 echartsInstance.dispose 销毁实例  

   

   

   
，在图表容器重新被添加后再次调用 echarts.init 初始化）：

const myEchart = ref(null) // 组件挂载完成时调用 onMounted(() => { testEcharts() // （在图表容器重新被添加后再次调用 echarts.init 初始化） }) const testEcharts = () => { myEchart.value = echarts.init(document.querySelector(.echarts-dom)) ...你的代码... } // 组件被卸载后调用 onUnmounted(() => { myEchart.value.dispose() // （在图表容器被销毁之后

     

     

     

，调用 echartsInstance.dispose 销毁实例） })

总结：

在有 Echarts 图表的页面在卸载时我们都要对图表进行销毁