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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
js获取ip和地区
Mar 10 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
js实现验证码干扰(静态)
Feb 22 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
上传多个文件的PHP脚本
2006/11/26 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
PHP 上传文件大小限制
2009/07/05 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
微信小程序 video组件详解
2016/10/25 Javascript
原生js实现轮播图
2017/02/27 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
JS二分查找算法详解
2017/11/01 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
django使用graphql的实例
2020/09/02 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
产品开发计划书
2014/04/27 职场文书
师德师风承诺书
2014/05/23 职场文书
禁毒心得体会范文
2016/01/15 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Go语言编译原理之变量捕获
2022/08/05 Golang