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 相关文章推荐
JS中style属性
Oct 11 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 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高级编程-函数-郑阿奇
2011/07/04 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP引用的调用方法分析
2016/04/25 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js打造数组转json函数
2015/01/14 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python实现简单状态框架的方法
2015/03/19 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
详解Python with/as使用说明
2018/12/13 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
将python安装信息加入注册表的示例
2019/11/20 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
2014年小学工作总结
2014/11/26 职场文书
主婚人致辞精选
2015/07/28 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python
Elasticsearch 批量操作
2022/04/19 Python
Python简易开发之制作计算器
2022/04/28 Python