keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。
使用方法
<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 该组件是否缓存取决于include和exclude属性 --> </component> </keep-alive>
参数解释include - 字符串或正则表达式，只有名称匹配的组件会被缓存exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时，一定要使用v-bind !
使用示例
<!-- 逗号分隔字符串，只有组件a与b被缓存。 --> <keep-alive include="a,b"> <component></component> </keep-alive> <!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) --> <keep-alive :include="/a|b/"> <component></component> </keep-alive> <!-- Array (需要使用 v-bind，被包含的都会被缓存) --> <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>
router.meta属性明确的指定该组件是否要缓存router.meta配置
...
{
path: 'edit',
component: () => import('@/views/site/edit'),
name: 'site.edit',
meta: {
title: '网址编辑',
hidden: true,
cache: false
}
},
{
path: 'list',
component: () => import('@/views/site/list'),
name: 'site.list',
meta: {
title: '网址列表',
hidden: false,
cache: true
}
},
...然后通过v-if标签来判断是否需要缓存
<!-- 缓存 --> <keep-alive> <router-view v-if="$route.meta.cache"></router-view> </keep-alive> <!-- 不缓存 --> <router-view v-if="!$route.meta.cache"></router-view>
路由A的配置
{
path: '/',
name: 'A',
component: A,
meta: {
cache: true // 需要被缓存
}
}组件B配置
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.cache = true; // 让 A 缓存，即不刷新
next();
}
};组件C配置
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.cache = false; // 让 A 不缓存，即刷新
next();
}
};如果组件被缓存，created()方法是不会被执行的。而一般我们都会在created方法中去请求数据，加载列表，那么如果当前页面缓存了，后台数据有更新，就会造成数据不能及时显示到前台，这时就需要手动刷新页面了。
所以组件是否需要缓存需要事情而定
export default {
data() {
return {};
},
created() {
// do some thing...
},
methods: {},
};
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
