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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
Js 中debug方式
Feb 07 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
PL-880隐藏功能
2021/03/01 无线电
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
Django数据库操作之save与update的使用
2020/04/01 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
大学生志愿者感言
2014/01/15 职场文书
电台编导求职信
2014/05/06 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js