Vue项目中Keep-alive不生效求助：路由页面每次刷新

兄弟，我看你遇到了keep-alive明明配置了，但每次进内容页面还是刷新、mounted和activated都触发的问题，这大概率是踩了keep-alive的常见坑，我给你梳理几个排查方向：

1. 路由组件必须显式声明name属性 #

这是最容易忽略的点！keep-alive是通过组件的name来识别缓存实例的，如果你要缓存的内容页面组件没写name，或者名字写错了，缓存直接失效，组件每次都会重新创建（导致mounted触发）。

比如你的内容页面组件一定要这样写：

<script>
export default {
  name: 'ContentPage', // 必须有这个，大小写要和keep-alive的include匹配
  // ...其他代码
}
</script>

2. 检查keep-alive的include/exclude配置 #

你代码里的<router-view v-...应该是用了v-include或者条件渲染吧？如果是用<keep-alive include="ContentPage">，那要确保：

• include里的字符串和组件的name完全一致（大小写敏感）
• 不要把需要缓存的组件写在exclude里
• 如果是用v-if控制keep-alive的显示，那路由切换时v-if的条件不能变化，否则keep-alive本身会被销毁，里面的router-view也会跟着重建

3. 避免给router-view加动态key #

如果你给router-view加了:key="$route.fullPath"这类动态key，每次路由变化key都会更新，Vue会认为这是一个全新的组件实例，直接创建新的，keep-alive的缓存就没用了。

如果是同一个组件对应不同路由参数（比如/content/:id），想要复用缓存的组件实例，应该在activated钩子里根据路由参数变化更新数据，而不是加key。

4. 区分mounted和activated的触发逻辑 #

• mounted只有组件首次创建时才会触发，如果每次进页面都触发，说明组件被重新创建了（缓存完全没生效），回到前面几点排查。
• activated每次激活缓存的组件都会触发，如果你在这里写了刷新数据的代码，就会看起来像页面“刷新”，这时候可以加个判断，比如只在路由参数变化时更新数据：

<script>
export default {
  name: 'ContentPage',
  data() {
    return {
      lastContentId: null
    }
  },
  mounted() {
    this.loadContent();
    this.lastContentId = this.$route.params.id;
  },
  activated() {
    // 只有当路由参数变化时才重新加载数据
    if (this.$route.params.id !== this.lastContentId) {
      this.loadContent();
      this.lastContentId = this.$route.params.id;
    }
  },
  methods: {
    loadContent() {
      // 拉取内容数据的逻辑
    }
  }
}
</script>

5. 确认keep-alive的包裹位置 #

确保keep-alive是直接包裹router-view，而且它的父组件不会被频繁销毁重建。比如你现在把keep-alive放在home.vue里，如果home页面本身没有被缓存，那当你离开home再回来时，home组件会重新创建，里面的keep-alive也会跟着失效。这种情况可以把keep-alive移到更高层级（比如App.vue里的router-view外面）。

举个正确的全局缓存例子：

<!-- App.vue -->
<template>
  <div id="app">
    <keep-alive include="ContentPage,HomePage">
      <router-view />
    </keep-alive>
  </div>
</template>

按这几个方向排查，应该能解决你的问题！

内容的提问来源于stack exchange，提问作者earnest1997