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 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
浅析javascript 定时器
Dec 23 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
微信小程序 form组件详解
Oct 25 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
javascript常用的设计模式
2017/02/09 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
python3处理含有中文的url方法
2018/05/10 Python
解决python "No module named pip" 的问题
2018/10/13 Python
NumPy 数组使用大全
2019/04/25 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
物业管理专业个人的自我评价
2013/11/19 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
员工考核管理制度
2014/02/02 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
销售总经理岗位职责
2014/03/15 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS