简单易懂，解决vue keep-alive缓存组件问题

最新推荐文章于 2024-03-22 11:01:48 发布

短暂又灿烂的

最新推荐文章于 2024-03-22 11:01:48 发布

阅读量532

点赞数

分类专栏：优化方案 javascript vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42232156/article/details/126260340

版权

优化方案同时被 3 个专栏收录

38 篇文章 1 订阅 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

javascript

121 篇文章 7 订阅

订阅专栏

vue

100 篇文章 5 订阅

订阅专栏

1.首先在路由中配置需要缓存组件的标识:(keepAlive: true)，尝试过先设置为false,然后在路由守卫里通过判断条件设置为true,但是遇到第一次不生效，第二次才生效的问题

export default [
  {
    path: '/',
    component: () =>
      import(
        /* webpackChunkName: "mainContainer" */ '@/views/mainContainer/index.vue'
      ),
    children: [
      {
        path: 'list',
        meta: {
          keepAlive: true,
        },
        component: () =>
          import(
            /* webpackChunkName: "resource" */ '@/views/index.vue'
          ),
      },
    ],
  },
]

2.在App.vue中添加相关代码

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