本文讲述了在Vue应用中如何通过keep-alive特性管理和保留路由组件状态，包括无keep-alive时内容丢失的问题，以及如何使用include和exclude配置来有条件地缓存Home和About页面。同时介绍了另一种基于路由配置的组件部分缓存方法。
name: “App”
};
路由组件1：Home.vue
This is a Home page
路由组件2：About.vue
This is an About page
<el-option
v-for=“item in options”
:key=“item.value”
:label=“item.label”
:value=“item.value”
在未使用keep-alive情况下，在Home页面输入框输入内容
然后切换到About页面，在选择框选择内容
之后进行一次来回切换，此时切换回Home页面，原先输入框的内容消失；相同的，切换回About页面，选择框的内容也消失，其实是因为这两个组件被销毁之后重新渲染了。
加上keep-alive，重复上面的操作，发现保留了组件状态（不销毁组件），避免了重新渲染。
根据条件缓存页面
如App.vue，使用include，此时只缓存Home页面的状态
Home
|
About
或者使用exclude，如下，表示缓存除了Home之外其他页面的状态
Home
|
About
include 和 exclude 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。匹配时，首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
除了以上方式，另外一种对路由组件部分缓存
修改路由配置
修改App.vue
Home
|
About
扫一扫
2063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
