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

最新推荐文章于 2025-05-10 22:58:27 发布

原创最新推荐文章于 2025-05-10 22:58:27 发布 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #node.js

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何使用keep-alive组件进行页面缓存，包括在app.vue文件中正确配置keep-alive，以及在router.js中设置页面的缓存属性。同时，文章还提供了在需要缓存的页面中加入特定代码的示例，以确保缓存功能的正常工作。此外，还记录了使用keep-alive时的组件生命周期钩子函数执行顺序，帮助开发者更好地理解组件的状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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不会再执行。

于此文记之！！！