vue中keep-alive的include、exclude两个属性--避坑和使用2个钩子函数activated、deactivated-CSDN博客

本文链接：https://blog.csdn.net/aaaaadddad/article/details/122819248

本文介绍了Keep-Alive在Vue Router中的使用，如何通过<keep-alive>缓存组件以避免重复渲染，以及如何配置include和exclude属性。还讲解了activated和deactivated钩子在组件状态切换中的作用。

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

keep-alive用法简介：我们在切换路由的时候，上一个页面就会被销毁，新的页面也会被创建，keep-alive它可以缓存组件，防止组件销毁，也就是说，我们在进行路由切换时，上次访问的页面数据依然存在，不会进行销毁。

普通用法：

只需要用keep-alive把需要缓存的组件包裹即可：

 <keep-alive>
      <router-view></router-view>
 </keep-alive>

include属性：字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude属性：字符串或正则表达式。任何名称匹配的组件都不会被缓存。

这里的属性值填什么呢？ 避坑！避坑！避坑！

在新创建的组件的这个位置写name名称，在路由实例中配置路由的时候命名是不对的，应该是组件的名称

<template>
  <div>
    <p>home</p>
  </div>
</template>

<script>

export default {
  //我在这！我在这！我在这！
  name: 'home',
  data () {
    return {

    };
  }
}
</script>
<style scoped>
</style>

找对了name，include属性，exclude属性，也就不用多说了。

activated、deactivated两个钩子函数

有keep-live才会触发这两个钩子函数，也是写在组件内部的，当进入组件时activated触发，离开时deactivated 触发，注意keep-alive包裹的组件切换时进行的就不再是组件销毁了。

<template>
  <div>
    <p>home</p>
  </div>
</template>

<script>

export default {
  name: 'home',
  data () {
    return {
    };
  },
  activated () {
    console.log('activated---我来了');
  },
  deactivated () {
    console.log('deactivated--我又走了');
  }
}
</script>
<style scoped>
</style>

喜欢的话点赞收藏，欢迎点击头像查看更多内容！