解决Vue中使用keepAlive不缓存问题


Posted in Javascript onAugust 04, 2020

1.查看app.vue文件,这个是重点,不能忘记加(我就是忘记加了keep-alive)

<template>
  <div>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2.查看router.js

{
 path:'/loanmessage',
 component:loanmessage,
 name:'loanmessage',
 meta: {
  keepAlive: true, //代表需要缓存
  isBack: false,
 },

3.在需要缓存的页面加入如下代码

beforeRouteEnter(to, from, next) {
 if (from.name == 'creditInformation' || from.name == 'cityList') {
  to.meta.isBack = true;
 }
 next();
},
activated() {
 this.getData()
 this.$route.meta.isBack = false
 this.isFirstEnter = false
 
},

附上钩子函数执行顺序:

  • 不使用keep-alive

beforeRouteEnter --> created --> mounted --> destroyed

  • 使用keep-alive

beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。

总结

到此这篇关于Vue中使用keepAlive不缓存问题(已解决)的文章就介绍到这了,更多相关Vue使用keepAlive不缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
微信小程序实现简单的select下拉框
Nov 23 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 #Javascript
如何在Vue.JS中使用图标组件
Aug 04 #Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 #Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 #Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 #Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 #Javascript
VUE使用axios调用后台API接口的方法
Aug 03 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Python实现在线音乐播放器
2017/03/03 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
中科软笔试题和面试题
2014/10/07 面试题
服装设计专业毕业生求职信
2014/04/09 职场文书
地球一小时倡议书
2014/04/15 职场文书
大专学生求职信
2014/07/04 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
大雁塔导游词
2015/02/04 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL