vue-router 切换tab标签关闭时缓存问题方案

最新推荐文章于 2025-06-10 13:53:16 发布

hlvy

最新推荐文章于 2025-06-10 13:53:16 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue vue 文章标签： vue vue tab标签页缓存

本文为博主原创文章，未经博主允许不得转载(转载请声明原文地址,谢谢java交流群:553997290)

本文链接：https://blog.youkuaiyun.com/qq_39313596/article/details/82628953

vue 同时被 2 个专栏收录

67 篇文章

订阅专栏

vue

65 篇文章

订阅专栏

本文介绍如何在Vue项目中配置路由组件的缓存机制。通过设置`keepAlive`属性为`true`或`false`来控制组件是否需要被缓存，并展示了具体的代码实现方式。

在router入口页面加上 keepAlive: true // 需要被缓存 false则不需要

  {
          path: 'fundProListG',
          component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve),
          title: '基金首页',
          redirect: 'fundProListG/fundProListG',
          meta: {
            keepAlive: false // 不需要被缓存
          },
          children: [{
            path: 'fundProListG',
            component: resolve => require(['@/pages/product/fundPros/fundProListG.vue'], resolve),
            meta: {
              keepAlive: true // 需要被缓存
            }
          },{
            path: 'fungAdm',
            component: resolve => require(['@/pages/product/fundPros/fungAdm.vue'], resolve),
            meta: {
              keepAlive: true // 需要被缓存
            }
          }]
        },

App.vue (你在哪写的那个<router-view ></router-view>标签就在哪改动)

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

当点关闭标签的时候如果不想当前页面缓存加上