keep-alive的作用：
当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，又需要请求数据，这就导致多次请求数据，降低了性能。这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。
keep-alive的基本用法：
<template>
<div id="app">
// keep-alive 路由的内容被加载过一次之后，就自动保存到内存中，不需要重新请求数据（不会再执行mounted，需要重新请求的ajax可以放在activated中）
// exclude="Detail" 可设置详情页不缓存 因为要获取每一个的id
<keep-alive :exclude="/WeekendDetail|Detail/">
// router-view 显示的是当前路由的地址所对应的内容
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: ‘App‘
}
</script>
<style>
</style>
用了keep-alive后，会多出一个生命周期函数 activated，有需要重新请求的ajax就放在里面，因为mounted在返回该页面时不会再执行。
mounted () {
this.lastCity = this.city
this.getHomeInfo()
},
activated () {
// 城市与上次不同时 首页要重新发送ajax请求
if (this.lastCity !== this.city) {
this.lastCity = this.city
this.getHomeInfo()
}
}
但是如果使用了 :exclude="/组件1|组件2/" ，意思是组件1，组件2被排除在外，这两个组件不使用keep-alive，所以在组件1和2中，执行ajax请求还是用mounted就好。
原文：https://www.cnblogs.com/Ashe94/p/10571233.html