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