<keep-alive> 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
属性
prop：
- include:字符串或正则表达式。只有匹配的组件会被缓存。
*exclude:字符串或正则表达式。任何匹配的组件都不会被缓存
一般用法：
export default {
name:'test-keep-alive',
data(){
return{
includeComponents:'test-keep-alive',
}
}
}
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 动态判断 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 将不缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
结合router，缓存部分页面
使用$route.meta的keepAlive属性：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中设置router的元信息meta：
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
首页是A页面
B页面跳转到A，A页面需要缓存
C页面跳转到A，A页面不需要被缓存
思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // B 跳转到 A 时，让 A 缓存，即不刷新
next();
}
};
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
next();
}
};
keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。
需求：
例如到产品详情页，与最近一次到达产品详情页对比，如果是相同的产品则使用上一次的缓存，如果不是那就重新加载页面，
（以下逻辑均在路由文件全局守卫中处理）：
Q 1:我怎么知道最近一次产品详情页呢？
A 1:进入组件时，将该组件的fullpath存到该组件的路由元中（做个标记），这个在路由全局守卫中可以轻易做到：
image
下次进来拿它路由元中的lastHistoryFullPath就知道最近一次进来的是哪个产品详情页了。
Q2：如何对比这次进来的产品详情页与最近一次的产品详情页呢？
A2 : 前面存下来的fullpath就可以区分，它包含了组件及后面的参数。
Q3：如果第二次进入产品详情页不是最近一次进来时相同的产品，如何处理？
A3 : 不想写了，直接贴代码看吧。
image.png
最后补充一个坑：
有一个页面的keepAlive始终不生效，最后也是踩了狗屎才能发现这个坑，原因就是这个组件在router文件中的配置name和组件实例中的name不一致。。。。。全局守卫中拿到的to或from的name是从router中对应的路由对象中拿的，而App.js 中的keepAlive标签中的exclude是对比的组件实例中的name,这样说来include应该也是这样。（原因是我猜的，信不信由你）。
网友评论