缓存,不管是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. 查找系列合集-二叉查找树BST

    一. 二叉树 1. 什么是二叉树? 在计算机科学中,二叉树是每个结点最多有两个子树的树结构. 通常子树被称作“左子树”(left subtree)和“右子树”(right subtree). 二叉树常 ...

  2. 洛谷——P2176 [USACO14FEB]路障Roadblock

    P2176 [USACO14FEB]路障Roadblock 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一定长度.FJ 的房子在 1 ...

  3. char 转string

    c++: string.c_str()       --------->    c: char c; string str;stringstream stream;stream << ...

  4. git 撤回上一次commit中某一个不想添加的文件

    1. 假设我们修改了文件a,同时修改了IDE的配置文件b 2.此时我们只想添加文件a到commit中,却不小心将b也添加进去了 3.那么怎么撤回呢? 4.第一种方法 :重新提交commit 5. 第二 ...

  5. trick点

    1.问题里有取模操作的时候,最后输出(ans+mod)%mod 2.涉及到输出实数0的时候要特判输出的会不是是-0.000000(因为0.00乘一个负的浮点数结果是-0.000000,乘一个正的浮点数 ...

  6. Usaco_Contest_2013_Open_Bovine Problem 1. Bovine Ballet

    Problem 1: Bovine Ballet [Brian Dean, 2013] In an attempt to challenge the stereotypical perception ...

  7. dtrace 语法

    Usage: dtrace [-aACeFHlqSvVwZ] [-arch i386|x86_64] [-b bufsz] [-c cmd] [-D name[=def]]      [-I path ...

  8. SQL-基础学习3--通配符:LIKE,%,(_); 拼接:+,||,concat;

    第六课 用通配符进行过滤 6.1  LIKE操作符 通配符本身实际上是SQL的WHERE子句中有特殊含义的字符,SQL支持几种通配符.为在搜索子句中使用通配符,必须使用LIKE操作符.LIKE指示DB ...

  9. Android 沉浸式全屏

    Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 “身临其境” 的体验. A ...

  10. 在c++11中你最惊讶的新feature是什么?

    对我来说,我最惊讶竟然把对于多线程的支持加到标准中了.真的想不明确,对于c++这样一种语言.怎么会加进这个东西. 1. 由于各个平台的不同,对于多线程的支持会有很多平台独有的特色.这样c++标准的定义 ...