解决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 相关文章推荐
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
通过实例学习React中事件节流防抖
Jun 17 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
生成静态页面的PHP类
2006/11/25 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
composer.lock文件的作用
2016/02/03 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
vue实现登录功能
2020/12/31 Vue.js
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python入门篇之函数
2014/10/20 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python Matplotlib模块的使用
2020/09/16 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
大学毕业生通用求职信
2013/09/28 职场文书
积极向上的团队口号
2014/06/06 职场文书
申报优秀教师材料
2014/12/16 职场文书
小学作文之描写天气
2019/08/15 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers