keep-alive可以将需要缓存的组件缓存在内存当中，下次再次访问的时候，直接从缓存中读取，而不是重新创建或者销毁……提高了性能。
1 利用include 和 exclude 属性设置
// include 和 exclude 属性允许组件有条件地缓存,匹配检查组件自身的 name 选项(注意是组件的名字，不是路由的名字) <keep-alive include="bookLists,book"> <router-view></router-view> </keep-alive> <keep-alive exclude="indexLists"> <router-view></router-view> </keep-alive>
2 利用meta属性设置
export default[ { path:‘/‘, name:‘home‘, components:Home, meta:{ keepAlive:true //需要被缓存的组件 }, { path:‘/book‘, name:‘book‘, components:Book, meta:{ keepAlive:false //不需要被缓存的组件 } ] <keep-alive> <router-view v-if="this.$route.meat.keepAlive"></router-view> <!--这里是会被缓存的组件--> </keep-alive> <keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive> <!--这里是不会被缓存的组件-->
添加keep-alive后会增加两个生命周期 activated 和 deactivated。
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated（不会触发created 和 mounted）。
原文：https://www.cnblogs.com/xjy20170907/p/12659042.html