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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
js href的用法
May 13 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
php新建文件的方法实例
2019/09/26 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
浅析Python中字符串的intern机制
2020/10/03 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
工作能力自我评价2015
2015/03/05 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android