解决Vue中使用keepAlive不缓存问题
更新时间：2020年08月04日 09:16:23 作者：Hello_yong
这篇文章主要介绍了Vue中使用keepAlive不缓存问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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不缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue实现计算器计算效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
本文主要介绍了Vue实现登录功能全套详解（含封装axios），文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了自定义Vue组件打包、发布到npm及使用教程 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了Vue3响应式核心之reactive的相关知识，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下2023-04-04
今天小编就为大家分享一篇关于Vuex中的State使用介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了解决新建一个vue项目过程中遇到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue插件使用方法详情分享，使用插件之前显示定义，下文通过js插件定义展开详细文章介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-03-03
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
这篇文章主要介绍了Vue keepAlive 数据缓存工具，实现返回上一个页面浏览的位置，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了Vue网络请求的三种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
最新评论