keep-alive 简介

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

参数解释

include - 字符串或正则表达式，只有名称匹配的组件会被缓存exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。当使用正则或者是数组时，一定要使用v-bind !

使用示例

使用场景

1、尽管可以通过正则表达式来include和exclude一些组件，但用的更多是通过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标签来判断是否需要缓存

2、不同的页面切换，刷新规则不同：B->A不刷新， C-A刷新

路由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: {},};

---

欢迎订阅「K叔区块链」 - 专注于区块链技术学习 博客地址： 简书主页： segmentfault主页： 腾讯云主页：