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

更新日期: 2020-06-10阅读: 2.5k标签: 缓存分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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

链接: https://fly63.com/article/detial/9363

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

浏览器缓存_HTTP强缓存和协商缓存

angularjs 缓存详解

浏览器缓存问题原理以及解决方案

Web缓存相关知识整理

使用缓存加速之后的网站访问过程变化

html页面清除缓存

HTTP之缓存 Cache-Control

工程化_前端静态资源缓存策略

前端静态资源自动化处理版本号防缓存

vue后台管理系统解决keep-alive页面路由参数变化时缓存问题