vue路由缓存keepAlive导致echarts图表100px偶现

键盘上的舞者jouvy

于 2022-12-11 17:41:36 发布

阅读量604

点赞数

文章标签： vue.js javascript 前端 echarts

本文链接：https://blog.youkuaiyun.com/weixin_44824290/article/details/128276599

版权

本文介绍了一种解决Vue项目中使用路由缓存导致echarts组件显示异常的方法。通过在activated钩子中加入chart实例的resize操作，确保了echarts组件在页面切换后能够正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目里有一个页面用了路由缓存

// 路由文件
{
      path: '/test',
      name: 'test',
      component: () => import('@/views/index.vue'),
      meta: {
          keepAlive: true,
      },
},

// vue路由出口
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

有时候会缩到左上角去，查看大小是100px

解决办法：
如果是将echarts封装成一个vue组件，在activated钩子里加resize操作

// activated钩子执行resize()方法
activated() {
    this.$nextTick(() => {
        this.chart.resize(); // this.chart是echart实例
    });
},