keep-Alive搭配vue-router实现缓存页面效果的示例代码


Posted in Javascript onJune 24, 2020

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
    }
},

总结

到此这篇关于keep-Alive搭配vue-router实现缓存页面效果的示例代码的文章就介绍到这了,更多相关vue router实现缓存页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
javascript实现前端成语点击验证
Jun 24 #Javascript
vue单文件组件无法获取$refs的问题
Jun 24 #Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 #Javascript
javascript实现评分功能
Jun 24 #Javascript
javascript实现移动端红包雨页面
Jun 23 #Javascript
JS实现canvas简单小画板功能
Jun 23 #Javascript
javascript+Canvas实现画板功能
Jun 23 #Javascript
You might like
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
原生js实现each方法实例代码详解
2019/05/27 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
简单介绍django提供的加密算法
2019/12/18 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
广告学专业推荐信范文
2013/11/23 职场文书
119消防日活动总结
2014/08/29 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
红领巾广播站广播稿
2015/08/19 职场文书