缓存,不管是PC 端还是移动端,不可避免的问题。vue中有一个keepAlive,这个api 基本 能实现我们开发的一些需要。

一、简单介绍下keep-alive:

1、把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染,实现页面缓存;

2、<keep-alive>是抽象组件,它自身不会渲染DOM元素,也不会出现在父组件链中。

3、当组件在<keep-alive>内被切换,它的actived 和 deactived 这两个生命周期钩子函数将会被对应执行。(这个基本没什么)

注:在2.2.0及其更高版本中,activated 和 deactivated 将会在<keep-alive>树内的所有嵌套组件中触发。

二、常规的使用

1、部分页面缓存

注意:其中transition 直接包在这两个外面  会报错;直接用transition-group也会报错,需要用两个transition。

2、个别页面不缓存

其中"hom"是vue组件中export default 中的name:'home'。

多个页面的时候可以这么写:

3、关于在beforeRouteLeave或者afterEach中进行拦截处理

经过代码实验,貌似起不了作用。一般用watch 代替

关于不起作用的原因:

有疑问:https://www.cnblogs.com/nokelong/p/8124513.html

vue的缓存机制的更多相关文章

  1. 内置组件 && vue中强大的缓存机制之keep-alive

    vue中强大的缓存机制之keep-alive 最近在用vue做项目,在切换页面时发现切换回原来的页面无法保存原来的状态. 如A页面需要ajax请求数据,然后切换到B页面做某些事情,再切换回A页面时,A ...

  2. 六、vue如何缓存页面

    vue如何和ionic的缓存机制一样,可以缓存页面,在A页面跳转至B页面后返回A页面时A页面的数据还在? 在app.vue中将router-view使用keep-alive包起来,使用v-if来判断使 ...

  3. 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...

  4. MyCat源码分析系列之——BufferPool与缓存机制

    更多MyCat源码分析,请戳MyCat源码分析系列 BufferPool MyCat的缓冲区采用的是java.nio.ByteBuffer,由BufferPool类统一管理,相关的设置在SystemC ...

  5. Java三大框架之——Hibernate中的三种数据持久状态和缓存机制

    Hibernate中的三种状态   瞬时状态:刚创建的对象还没有被Session持久化.缓存中不存在这个对象的数据并且数据库中没有这个对象对应的数据为瞬时状态这个时候是没有OID. 持久状态:对象经过 ...

  6. Spring缓存机制的理解

    在spring缓存机制中,包括了两个方面的缓存操作:1.缓存某个方法返回的结果:2.在某个方法执行前或后清空缓存. 下面写两个类来模拟Spring的缓存机制: package com.sin90lzc ...

  7. hibernate缓存机制(转)

    原文出处:http://www.cnblogs.com/wean/archive/2012/05/16/2502724.html 一.why(为什么要用Hibernate缓存?) Hibernate是 ...

  8. [转]Android ListView 与 RecyclerView 对比浅析—缓存机制

    从源码角度剖析ListView 与 RecyclerView 缓存机制的不同 https://zhuanlan.zhihu.com/p/23339185 原文地址:http://dev.qq.com/ ...

  9. HTML5应用缓存机制

    首先先上一张图: 用360浏览器的用户对这张图应该都是耳熟能详了吧,没错,当网络不通畅时使用360浏览器,便会有这张图弹出来.为什么没有网络还能弹出这一副画面呢?这就关乎HTML5的应用缓存机制了. ...

随机推荐

  1. 空间划分的数据结构(网格/四叉树/八叉树/BSP树/k-d树/BVH/自定义划分)

    目录 网格 (Grid) 网格的应用 四叉树/八叉树 (Quadtree/Octree) 四叉树/八叉树的应用 BSP树 (Binary Space Partitioning Tree) 判断点在平面 ...

  2. LightOj 1215 Finding LCM

    Discription LCM is an abbreviation used for Least Common Multiple in Mathematics. We say LCM (a, b, ...

  3. Anaconda环境搭建

    最近要使用Anaconda做一些机器视觉相关的开发,在此记录下Anaconda的搭建 首先去官网下载 这里我选择windows平台 由于浏览器自己下载的过慢,我这里选择用迅雷下载 没python就把那 ...

  4. Leetcode总结之Backtracking

    本文我们就Leetcode中的一个类型的题目backtracking进行一系列的总结和归纳.backtracking这个方法本质是建立在递归的基础上,不断尝试新的路径,这里关键是每次尝试完以后需要退回 ...

  5. Android动画系列 - PropertyAnim 详解

    前言:上一篇文章传统View动画与Property动画基础及比较简单对Android动画系统的基础做了介绍,本篇文章将对PropertyAnimation进行全面深入的探讨,本篇文章可以分为两大块,从 ...

  6. 邁向IT專家成功之路的三十則鐵律 鐵律八:IT人學習之道-基礎功

    修練過中國武術的人都知道,任何一種拳法的學習最重要的就是基礎功,而基礎功又可分為內在與外在的修練,內在的修練強調在平心.靜氣.不爭的調息.至於外在這首重在站樁.鬆沉.不疾不徐的應對能力.有了深厚基礎的 ...

  7. jquery怎么找到元素下面的第一个子元素

    <ul><li>11</li><li>22</li><li>33</li><li>44</li&g ...

  8. iOS经常使用设计模式——单例模式

    第一部分: 创建一个单例对象 单例的应用场景: 单例模式用于当一个类仅仅能有一个实例的时候. 通常情况下这个"单例"代表的是某一个物理设备比方打印机,或是某种不能够有多个实例同一时 ...

  9. vdWebControl.js去水印

    vdWebControl.js可以在浏览器中展示cad图形(须要使用其自家的转换工具把cad转换为vds格式.工具免费,但转换完成后的文件带水印信息),支持编辑图形. vdWebControl.js试 ...

  10. Win7/Win2008下IIS配置Asp网站启用父路径的设置方法(已解决)

    Win7/Win2008下IIS配置Asp网站启用父路径的设置方法(已解决) 在Win7/Win2008下IIS配置Asp网站启用父路径的设置方法与win2003下不同,看看下图就知道了.