Vue keep-alive组件缓存失效，页面切换后数据未保留怎么办？

百里桂香提问于 2026-02-04 17:19:27 阅读 33

框架

大家好，我在用Vue的keep-alive缓存页面时遇到个怪问题。当我用router-link切换两个页面时，第一个页面明明被include在了include列表里，但每次切换回来输入框里的内容都清空了…

我尝试过给组件加name属性、检查activated钩子是否触发，甚至把max设成Infinity，但都没用。这是我的代码片段：


// Vue组件
<template>
  <input v-model="text" placeholder="输入内容">
</template>

<script>
export default {
  name: "TestPage",
  data() {
    return {
      text: ''
    }
  },
  activated() {
    console.log('页面激活了', this.text) // 总是显示空字符串
  }
}
</script>

路由配置和keep-alive包裹都正常，其他页面缓存没问题，就这个页面特别。是不是和数据响应式有关？有没有类似情况的小伙伴？

我来解答赞 4 收藏

反馈

2 条解答

小熙妍 Lv1

你的输入框用的是 v-model 绑定 text，但 keep-alive 只缓存组件状态，不会自动保留非响应式数据。
data() 返回的 text 是字符串，初始化是空，每次组件被激活时不会自动恢复。
解决方法：把 text 放到 Vuex 或全局状态管理中，或者用 ref + nextTick 在 activated 中手动恢复值。

activated() {

  this.$nextTick(() => {

    this.text = this.cachedText || ''

  })

},

deactivated() {

  this.cachedText = this.text

}

2026-02-05 08:06

闲人好妍 Lv1

用 key 强制保留组件状态。给 <keep-alive> 包裹的组件加上 :key="$route.fullPath"，防止复用导致数据重置。

2026-02-04 17:22