Vue2.0 实现页面缓存和不缓存的方式


Posted in Javascript onNovember 12, 2019

1、在app中设置需要缓存的div

<keep-alive>//缓存的页面
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>//不缓存的页面

2、在路由router.js中设置.vue页面是否需要缓存

{
  path: '/home',
  component: home,
  meta: { keepAlive: true },//当前的.vue文件需要缓存
},
{
  path: '/notice',
  component: notice,//当前页面不需要缓存
}

3、从缓存页面跳转到不缓存页面,或者从不缓存页面跳转到缓存页面的时候,会发现watch是不能监听路由的,是因为缓存和不缓存页面分别在不同的div里面,一个div里面是不可能监听到另一个div的路由的,所有需要把监听的路由都加上缓存(在路由添加 meta: { keepAlive: true }),路由在缓存页面之间进行跳转的时候,就可以通过监听路由来进行判断数据是否需要更新。

vue keep-alive 缓存后, 进入缓存页需要再次更新

beforeRouteEnter (to, from, next) {
 next (vm => {
   vm.getData()
 })
},
 mounted: function () {
  this.getData()
}

keep-alive 数据更新问题

在项目中使用<keep-alive>包含<router-view>实现页面缓存,加速页面加载,

同时,这种方式带来一些弊端,请看如下大神解释:

****************************************************************************

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。

当再次进入(前进或者后退)时,只触发activated。

****************************************************************************

这就带来一个问题,之前在项目中使用mounted在页面加载时获取数据,使用<keep-alive>后方法不再生效,

根据上面的解释,将mounted替换为activated即可。

以上这篇Vue2.0 实现页面缓存和不缓存的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 #Javascript
vue 中几种传值方法(3种)
Nov 12 #Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 #Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 #Javascript
vue.js 实现a标签href里添加参数
Nov 12 #Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 #Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 #Javascript
You might like
php printf输出格式使用说明
2010/12/05 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
python线程里哪种模块比较适合
2020/08/02 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
学生鉴定评语大全
2014/05/05 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
应收账款管理制度
2015/08/06 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
instantclient客户端 连接oracle数据库
2022/04/26 Oracle