一、简介

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

二、使用

在案例中，首页进去之后默认显示新闻这个嵌套组件，当我们点击其他与首页平级组件再回去时，也是默认选择新闻，我们想要保持首页选择组件的状态（如：离开首页时显示消息，再次回来也显示消息）

实现代码：

将keep-alive标签加入，以便使用activated和deactivated这两个生命周期钩子函数

在index.js的路由配置中将内嵌路由的重定向注释掉，在Home.vue中做如下更改：

以上就是keep-alive中生命周期函数的使用

三、keep-alive属性介绍

keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

有两个非常重要的属性：

1、include-字符串或正则表达式，只有匹配的组件会被缓存

2、exclude-字符串或正则表达式，然和匹配的组件都不会被缓存。

<keep-alive exclude="Profile,User">

      <router-view></router-view>

    </keep-alive>

这样的话profile组件和user组件就不会被保留，正常创建和销毁。"Profile,User"二者中间不要加空格。