keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive是什么？ keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 Props： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 用法： 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。 使用场景 本文讲以最常见的 列表页>详情页>列表页 需要保持上一次列表状态的情况为例讲解，这里主要用到了keep-alive的生命周期activated和sessionStorage。 推荐直接用include或者exclude方式，简洁高效。 1、首先给需要缓存的组件添加name属性，如下： //列表页 export default { name: 'list',//组件的名字 data() { return {} } } 2、在组件关联的router-view上添加keep-alive，并加入include属性，填入我们的组件名list，如下： //App主入口 <template> <keep-alive :include="keepAliveArr"> <router-view></router-view> </keep-alive> </template> export default { name: 'App', data() { return { keepAliveArr: ['list'] //需要缓存的组件的名字（vue文件中的名字） } } } 注：include和exclude接受字符串、数组和正则，我们可以根据项目需要自行添加需要/不需要缓存的组件名。 3、在缓存的组件中加入activated生命周期用来排除从其它页面进入的情况： //列表页 export default { name: 'list', data() { return {} }, activated() { if(!window.sessionStorage.getItem('needCache')) { this.getData(1, true); //非详情页进来需要请求数据 } else { window.sessionStorage.removeItem('needCache') //及时清除 } }, methods: { goDetail() { window.sessionStorage.setItem('needCache', true); //进入关联页面前存个标识，可以使用 window.sessionStorage.removeItem('needCache') 移除标识 this.$router.push({ path: '/detail', query: { id: 'xxx' } }) } } } 注意事项 include和exclude中是组件的名字，而不是路由的名字； keep-alive必须加在组件直接关联的router-view上（有多个router-view的情况下要注意）。
