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 走马灯简单实例
Nov 21 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 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 PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python如何爬取个性签名
2018/06/19 Python
python简单操作excle的方法
2018/09/12 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
基于FME使用Python过程图解
2020/05/13 Python
Python绘制数码晶体管日期
2021/02/19 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
前台文员岗位职责
2013/12/28 职场文书
社区志愿者心得体会
2014/01/03 职场文书
我的画教学反思
2014/04/28 职场文书
机械专业求职信
2014/05/25 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python