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 利用闭包模拟对象的私有属性
Dec 29 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php旋转图片90度的方法
2013/11/07 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
javascript实现表单验证
2016/01/29 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python读写ini文件的方法
2015/05/28 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Python生成随机数组的方法小结
2017/04/15 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
巾帼建功标兵事迹材料
2014/05/11 职场文书
森林病虫害防治方案
2014/06/02 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
项目备案申请报告
2015/05/15 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python