结论：
1、使用keepLive设置缓存的页面，每次离开该页面时，该页面都不会执行destroyed方法销毁。
2、使用keepLive设置缓存的页面，每次进入该页面都会执行其activated方法，离开该页面都会执行其deactivated方法。
验证：
新建2个页面page01.vue、page02.vue，生命周期方法代码如下：
mounted() {
console.log("page01 mounted");
},
destroyed() {
console.log("page01 destroyed");
},
activated() {
console.log("page01 activated");
},
deactivated() {
console.log("page01 deactivated");
},
mounted() {
console.log("page02 mounted");
},
destroyed() {
console.log("page02 destroyed");
},
activated() {
console.log("page02 activated");
},
deactivated() {
console.log("page02 deactivated");
},
App.vue代码：
<template>
<div id="app">
<router-view />
</div>
</template>
路由配置：
{
path:"/page01",
component: page01,
},
{
path:"/page02",
component: page02,
},
现在从主页跳转page01，再从page01跳转page02，再从page02返回page01，再从page01返回主页，打印log如下：
发现，page02在返回page01时，page01页面被销毁了，所以page01页面又执行了mounted方法，page02页面也执行了destroyed销毁方法，而keep-live的回调方法activated和deactivated都没有被执行。
现在，修改App.vue的代码，给组件套上一个 keep-alive标签，使所有组件都被缓存：
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
现在从主页跳转page01，再从page01跳转page02，再从page02返回page01，再从page01返回主页，打印log如下：
发现，page02在返回page01时，page01页面没有被销毁，所以page01页面会执行keep-live的回调方法activated，而page02页面也没有被销毁，没有执行destroyed方法，而是执行了keep-live的回调方法deactivated。
如果想设置page01缓存，page02不缓存，可这样：
1、App.vue的代码修改为：
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
2、路由配置修改为：
{
path:"/page01",
component: page01,
meta:{
keepAlive: true,//缓存
}
},
{
path:"/page02",
component: page02,
meta:{
keepAlive: false,//不缓存
}
},
现在从主页跳转page01，再从page01跳转page02，再从page02返回page01，再从page01返回主页，打印log如下：
