vue2中使用keep-alive缓存router-view组件的3种方法

yaoliangliang888

已于 2024-02-23 15:39:11 修改

阅读量7.1k

点赞数 4

文章标签： vue.js

于 2022-03-30 17:33:56 首次发布

本文链接：https://blog.csdn.net/yhlhelloworld/article/details/123851432

版权

本文详细介绍了Vue中的keep-alive组件如何用于缓存不活动的组件实例，探讨了三种不同的实现方法，包括监听路由变化、利用路由元数据以及直接使用keep-alive的include和exclude属性。

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

首先先了解一下什么是keep-alive

keep-alive:vue内置组件，包括不活动的实例;dom结构移除了；

但是组件的实例没有被销毁；而是缓存起来了；注意：缓存的是组件的实例
1. 包括组件
2. 包括路由的坑 router-view

它有3个属性分别是：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

要想缓存router-view一般需要在app.vue中

第一种方法是监听路由变化获取到路由的名称判断是否缓存

<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="name=='Home'" /> //把名称相匹配的缓存
    </keep-alive>
    <router-view v-if="name=='About'" />  //名称不匹配的写在外边
  </div>
</template>
<script>
export default {
    data() {
        return {
          name:'',  //用来保存路由名称
        }
    },
    watch:{
        '$route':{ // 监听路由变化
          handler(newVal,oldVal){  
              console.log(newVal)
              this.name=newVal.name  //把名子赋值给name
          },
          immediate:true  //开启立即监听
        }
    }
}
</script>

第二种方法使用路由元数据 meta，我们在路由配置文件中给需要添加缓存的页面配置路由元信息

router里index.js里配置

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      falg:true  //** 我们可以在要缓存的路由中随便写个属性值为true*//
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta:{   //** 不需要的可以什么都不写，如果想写的话可以写个false*//
        falg:false
    }
  },
]

const router = new VueRouter({
  routes
})
export default router

然后在回到app.vue里

<template>
  <div id="app">
       <keep-alive>
          <router-view v-if="$route.meta.falg==true" />  //是否为true 成立的话就进行缓存
      </keep-alive> 
      <router-view v-if="$route.meta.falg==false" />  //为false 就写在缓存外面
  </div>
</template>

第三种方式就是直接使用keep-alive自带的属性 include 和 exclude

<template>
  <div id="app">
        <!-- :include="/mycom1|mycom2/"  正则写法  -->
        <!-- :include="['mycom1','mycom2']"  数组写法 -->
      <keep-alive include="About">  //直接缓存我们需要缓存的路由名称 
          <router-view />
      </keep-alive>      
    
  </div>
</template>