示例vue 的keep-alive缓存功能的实现

悠悠 2022-04-08 11:17 125阅读 0赞

本篇文章主要介绍了vue 的keep-alive缓存功能的实现，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。

# **Vue 实现组件信息的缓存** #

当我们在开发vue的项目过程中，避免不了在路由切换到其他的component再返回后该组件数据会重新加载，处理这种情况我们就需要用到keep-alive来缓存vue的组件信息，使其不再重新加载。

**一、在app.vue里**

keep-alive>
      <router-view></router-view>
    </keep-alive>

但是这种情况会对所有的组件进行缓存，不能达到单个组件缓存的效果。  
那么我们给部分组件加上，实现方法如下：  
在app.vue

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

**二、 在路由的index.js页面里**

{
      path: '',
      name: '',
      component: '',
      meta: {keepAlive: true}   // 这个是需要keepalive的
    }，
    {
      path: '',
      name: '',
      component: ,
      meta: {keepAlive: false}  // 这是不会被keepalive的
    }

这就实现了部分组件的缓存功能  
如果缓存的组件想要清空数据或者执行初始化方法，在加载组件的时候调用activated钩子函数，如下：

activated: function () {
      this.data = ‘'
    }

**结语**

感谢您的观看，如有不足之处，欢迎批评指正。

原文地址：[https://segmentfault.com/a/1190000017356279][https_segmentfault.com_a_1190000017356279]

[https_segmentfault.com_a_1190000017356279]: https://segmentfault.com/a/1190000017356279

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关解决vue 使用keepalive 一直缓存的页面的问题。

问题描述： ![20190918125646939.gif][] Form01 -> Form02（该页面的信息需要被缓存） -> F...

本是古典何须时尚/ 2024年04月19日 12:34/ 0 赞/ 31 阅读

相关 vue实现页面缓存的方法以及示例代码

使用Vue框架实现页面缓存的方法有以下几种： 1. 使用Vuex缓存：Vuex是Vue框架的一个状态管理库，可以将页面的数据存储在Vuex中，以便在页面重新加载时可以快速获

女爷i/ 2024年03月25日 10:32/ 0 赞/ 51 阅读

相关 vue中keepAlive的使用

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓

﹏ヽ暗。殇╰゛Y/ 2023年10月11日 14:17/ 0 赞/ 14 阅读

相关 vue中使用keepAlive组件缓存遇到的坑

项目开发中在用户由分类页category进入detail需保存用户状态，查阅了Vue官网后，发现vue2.0提供了一个keep-alive组件。上一篇讲了keep-aliv

Myth丶恋晨/ 2023年08月17日 17:38/ 0 赞/ 97 阅读

相关 vue keepalive

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不

男娘i/ 2022年11月01日 10:54/ 0 赞/ 141 阅读

相关 Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

文章目录 Vue学习（动态组件、组件路由缓存keepalive）-学习笔记动态组件组件路由缓存keepalive

墨蓝/ 2022年10月04日 15:00/ 0 赞/ 171 阅读

相关实现缓存功能

1、缓存 CacheBean.getIntance(); package com.comName.epg.cache.aop; import java.u

水深无声/ 2022年08月03日 11:38/ 0 赞/ 166 阅读

相关示例vue 的keep-alive缓存功能的实现

本篇文章主要介绍了vue 的keep-alive缓存功能的实现，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 Vue

悠悠/ 2022年04月08日 11:17/ 0 赞/ 126 阅读

相关 vue中keepalive的使用

App.vue写2个 router-view 出口 <keep-alive>  <router-v

小灰灰/ 2021年09月09日 05:08/ 0 赞/ 482 阅读

相关 Vue中的keepalive使用缓存页面和不缓存页面

什么是keepalive：我们在平时开发中，总有部分组件没必要多次 Init,我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时，也不会重新init。keepa

￡神魔★判官ぃ/ 2021年09月08日 16:08/ 0 赞/ 876 阅读