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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
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实现邮件发送并带有附件
2014/01/24 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python版微信红包分配算法
2015/05/04 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python负载均衡的简单实现方法
2018/02/04 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python实现注册、登录小程序功能
2018/09/21 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
爱情保证书范文
2014/02/01 职场文书
十一酒店活动方案
2014/02/20 职场文书
青年标兵事迹材料
2014/08/16 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
好媳妇事迹材料
2014/12/24 职场文书
语文复习计划
2015/01/19 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技