在vue开发过程中（单页面），有一些需求需要我们把页面状态保存下来。在切换页面时，页面不会进行重新加载。
一般情况下，如果不做特殊处理，会重新执行created 和 mounted生命周期，从而重新加载页面，默认就显示到第一页去了，就很烦。
（我的问题是，使用keep-alive了，但组件仍然不缓存，下面会解决）
//第一种：直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
<keep-alive>
<component :is="comName"></component>
</keep-alive>
//第二种：include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="ReportA，ReportB"
<keep-alive include="ReportA">
<component :is="comName"></component>
</keep-alive>
//第三种：include+正则表达式或者数组 这种情况必须用v-bind (:include="")
<keep-alive :include="['ReportA']">
<component :is="comName"></component>
</keep-alive>
//第四种：exclude 此时组件A内容不会被缓存，组件B内容会被缓存
<keep-alive exclude="ReportA">
<component :is="comName"></component>
</keep-alive>
//特殊情况：若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
<keep-alive include="ReportA,ReportB" exclude="ReportA">
<component :is="comName"></component>
</keep-alive>
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5">
<component />
</keep-alive>
参考链接:https:
我写了两个组件，一个房态的，一个列表，需要动态切换。
组件切换没问题，但每次都要加载created 和 mounted生命周期。 （我搜索了下原因，都没用，后来又看了遍代码，突然发现问题）
原因： 主要是引入的组件，export default{ } 默认输出，忘写名字。
下面是代码分享
主页面
//主页面
<template>
<keep-alive include="ReportA,ReportB">
<component :is="comName" > </component>
</keep-alive>
</template>
<script>
import ReportA from './components/reportA.vue'
import ReportB from './components/reportB.vue'
export default {
components: {
ReportA,
ReportB,
},
}
</script>
子页面
<script>
export default {
name: 'ReportA', //需要默认输出的名字（两个页面都要）
}
</script>
首先在router中为路由页面添加meta属性：
{
path: '/tab',
name: 'tab',
meta:{
keepAlive:true //需要缓存
},
component: () => import('../views/Tab.vue')
},
{
path: '/banner',
name: 'banner',
meta:{
keepAlive:false //不需要缓存
},
component: () => import('../views/Banner.vue')
}
然后在App.vue中添加判断：
//此处是为添加了keepAlive=true 的路由添加缓存
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
//此处是为添加了keepAlive=false 的路由默认不缓存
<router-view v-if="!$route.meta.keepAlive"/>
