keep-Alive搭配vue-router实现缓存页面效果

时间: 2020-06-10阅读: 105标签: 缓存

vue工程中有些页面需要有缓存。这个功能通过keep-alive组件实现,keep-alive组件可以使被包含的组件保留状态,或避免重新渲染。

在routes.js中定义路由,在路由中定义元信息(meta字段),需要缓存的页面就需要在meta对象中定义一个字段,这里设置为keepAlive,设置为true,反之,则不缓存。

{
    path: '/a',
    component: () => import('@/pages/A'),
    meta: {
      title:'A',
      keepAlive: true
    }
},
{
    path: '/b',
    component: () => import('@/pages/B'),
    meta: {
      title:'B',
      keepAlive: true
    }
},
{
    path: '/c',
    component: () => import('@/pages/C'),
    meta: {
      title:'C',
      keepAlive: true
    }
}

然后修改App.vue页面

<template>
  <div id="app">
    <!-- <router-view v-if="isRouterAlive"></router-view> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

这样就可以实现有目的的对页面进行缓存了。

但如果这时要实现从A页面进入B页面后,让A页面不缓存的话我们还需要搭配上路由钩子函数beforeRouteLeave()。

在A页面中这样写:

beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        if(to.meta.title=="B"){
            from.meta.keepAlive = false;  // 让B不缓存,即刷新
        }
        next();
}

用到keep-Alive,遇到的最多的一个问题就是怎么去掉这种缓存状态。就比如用户每一次进行新流程的操作的时候,这个时候页面还是缓存是不对的。

就比如,一个用户登录之后在某个缓存的页面上填了信息,如果这个用户注销了之后,按道理,这些信息是应该消失的,即恢复初始状态,但是这个时候不关闭页面标签(因为新开标签的话会使所有页面重新渲染),用户再次登录回去,还会发现之前的页面还是存在缓存的,即这个页面没有重新渲染。如果想要解决这个问题的话,就要提到activated和deactivated这两个特殊的生存周期函数了。但是需要注意的是,activated和deactivated这两个生存周期函数只存在于keep-Alive组件中。当一个keep-Alive组件缓存生效的时候,它不会触发平常我们熟悉的created()和mounted()这类生存周期函数,因此不会被重新渲染,所以,它的状态得以保留。但是我们可以通过这两个生存周期函数来更新页面。

先设置一个全局的标志符,类型为布尔值,代表是否为缓存状态,你可以把它存进vuex或者sessionStorage。(以下为存入sessionStorage为例)

在用户登录成功的时候设置为sessionStorage.setItem("keepAlive",false);然后在缓存页面中添加如下代码

activated:function(){
        if(sessionStorage.getItem("keepAlive")=='false'){
            //进行初始化
        }else{
            //to do
        }
},
来自:https://www.cnblogs.com/jdWu-d/p/11970297.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9363

彻底理解浏览器缓存机制

浏览器的缓存机制也就是我们说的 HTTP 缓存机制,其机制是根据 HTTP 报文的缓存标示进行的。所以在分析浏览器缓存之前,我们先使用图文简单介绍一下 HTTP 报文,HTTP 报文分为两种:

抽离css以及公共js

分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。当我们考虑更好地利用缓存来加速静态资源访问时,会尝试把一些公共资源单独分离开来,利用缓存加速,以避免重复的加载

nginx开启gzip压缩和静态缓存

nginx实现资源压缩的原理是通过ngx_http_gzip_module模块拦截请求,并对需要做gzip的类型做gzip压缩,该模块是默认基础的,不需要重新编译,直接开启即可。

浏览器端的九大缓存

浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九种

HTTP之缓存 Cache-Control

通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值:缓存头Cache-Control只能在服务端设置,在客户端是由浏览器设置的,自己不能修改它的值。

Node.js中的code cache

V8使用JIT去解析JS,在JS代码执行之前,首先要消耗大量的时间在解析和编译中,这会拖慢JS的总执行时间,在2015年V8支持了code cache方案来解决这个问题。

keep-alive的使用

<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素,<keep-alive> 要求同时只有一个子元素被渲染。

缓存命中率过低;大量缓存项同时刷新;刷新同一个缓存项

缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。

<keep-alive> 缓存及其缓存优化原理

由于缓存空间是有限的,所以不能无限制的进行数据存储,当存储容量达到一个阀值时,就会造成内存溢出,因此在进行数据缓存时,就要根据情况对缓存进行优化,清除一些可能不会再用到的数据。所以根据缓存淘汰的机制不同,常用的有以下三种:

运用惰性删除和定时删除实现可过期的localStorage缓存

使用localStorage可以在浏览器中存储键值对的数据。经常被和localStorage一并提及的是sessionStorage,它们都可以在当浏览器中存储键值对的数据。但是它们之间的区别是:存储在localStorage的数据可以长期保留;而当页面会话结束

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广