vue组件缓存之keep-alive正确使用姿势_keepalive缓存组件

最新推荐文章于 2024-07-29 17:34:51 发布

2401_84446825

最新推荐文章于 2024-07-29 17:34:51 发布

阅读量405

点赞数 7

分类专栏：程序员文章标签： vue.js 缓存 spring

本文链接：https://blog.csdn.net/2401_84446825/article/details/138315472

版权

程序员专栏收录该内容

157 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue应用中使用keep-alive组件实现按需缓存，通过在组件路由配置中定义元信息来区分需要缓存和不缓存的组件，并利用`include`数组动态管理缓存。同时，文章提到了通过添加`deepth`字段来处理从不同层级路由进入时的缓存问题。

摘要由CSDN通过智能技术生成

但是 keep-alive 会把其包裹的所有组件都缓存起来。

em…怎么办呢，我们只是需要让列表页缓存啊.

分析一下

我们可以把需求拆分为2步

(1) 把需要缓存和不需要缓存的组件区分开，在组件的路由配置的元信息，meta中定义哪些需要缓存哪些不需要缓存

具体代码如下

1，定义两个出口 router-view

<keep-alive>
    <!-- 需要缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

2，在router配置中定义哪些需要缓存哪些不需要缓存

new Router({
    routes: [
        {
            path: '/',
            name: 'index',
            component: () => import('./views/keep-alive/index.vue')
        },
        {
            path: '/list',
            name: 'list',
            component: () => import('./views/keep-alive/list.vue'),
            meta: {
                keepAlive: true //需要被缓存
            }
        },
        {
            path: '/detail',
            name: 'detail',
            component: () => import('./views/keep-alive/detail.vue')
        }
    ]
})

(2)，开始按需缓存组件

我们从官方文档提供的 api 入手,

keep-alive组件如果设置了 include ，就只有和 include 匹配的组件会被缓存，

所以思路就是，动态修改 include 数组来实现按需缓存。

<template>
    <keep-alive :include="include">
        <!-- 需要缓存的视图组件 -->
      <router-view v-if="$route.meta.keepAlive">
      </router-view>
    </keep-alive>

    <!-- 不需要缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive">
    </router-view>
</template>
<script>
    export default {
      name: "app",
      data: () => ({
        include: []
      }),
      watch: {
        $route(to, from) {
          //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
          if (to.meta.keepAlive) {
            !this.include.includes(to.name) && this.include.push(to.name);
          }
        }
      }
    };
</script>

此时我们发现，从详情页返回列表页，列表页真的不再刷新了

em…新的问题又出现了,由于列表页被缓存了,这个时候我从首页,再点击进入某个列表，也不刷新了，完了，点击首页导航应该进入不同的列表页的. 也就是说，从首页进入列表组件不应该被缓存的。

解决一下，我们在定义路由是，在元信息中再加一个字段，这里是deepth字段，代表进入路由的层级,比如首页路由deepth是0.5,列表页是1,详情页是2

new Router({
    routes: [
        {
            path: '/',
            name: 'index',
            component: () => import('./views/keep-alive/index.vue'),
            meta: {
                deepth: 0.5 // 定义路由的层级
            }
        },
        {
            path: '/list',
            name: 'list',
            component: () => import('./views/keep-alive/list.vue'),
            meta: {
                deepth: 1
                keepAlive: true //需要被缓存
            }
        },
        {
            path: '/detail',
            name: 'detail',
            component: () => import('./views/keep-alive/detail.vue'),
            meta: {
                deepth: 2
           }
        }
    ]
})

然后在 app.vue中增加监听器，监听我们进入路由的方向

具体代码如下