简介
<keep-alive>是Vue的内置组件，当他包裹组件时，会对组件进行缓存，不去销毁组件。
首次进入页面时，会触发mounted和activated钩子，当页面被缓存下来后，进入页面只会触发activated钩子，离开页面会触发deactivated，不会触发destroyed。
使用
参数
// 将缓存 name 为 home 的组件<keep-alive include='home'><router-view/></keep-alive>// 使用正则表达式<keep-alive :include='/home|index/'><router-view/></keep-alive>
通过路由中的 meta 属性控制
通过在路由中的meta添加keepAlive属性为true，标识当前页面需要进行缓存。
{path: '/shop',name: 'shop',component: () => import('./views/shop.vue'),meta: {keepAlive: true //此组件需要被缓存}},
结合v-if进行使用
<keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" />
现在我们已经可以缓存页面了，但是在开发过程中，如下场景：
list：商品列表页。shop：商品页（被缓存）。order：购买页。
当从列表页跳到商品页时，商品页不需要缓存，只有从购买页跳到商品页时，才需要缓存。
为了满足这种同一个页面有时需要缓存，有时不需要的场景，需要使用路由守卫beforeRouteLeave来实现，根据将要访问的页面判断是否要清除缓存。
beforeRouteLeave(to, from, next) {// 回到商品列表不缓存if(to.name === 'list'){// 清除缓存this.$destroy();}next();}
如果觉得《Vue—keepAlive 动态管理页面缓存》对你有帮助，请点赞、收藏，并留下你的观点哦！
