<keep-alive>是Vue的內建元件，能在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOM。

<keep-alive> 包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。和 <transition> 相似，<keep-alive> 是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在父元件鏈中。

• include: 字串或正則表示式。只有匹配的元件會被快取。
• exclude: 字串或正則表示式。任何匹配的元件都不會被快取。

經過我這次的專案實踐，總結出了keep-alive的頁面是一直都會快取起來的，直到你重新資料渲染之後去改變快取的狀態。

在看文章的時候可以到官網瞭解一下keep-alive額

情況一：只有從詳情頁跳轉到列表頁是，列表頁是上一次快取下來的；其頁面跳轉到列表頁，列表頁重新獲取資料渲染（初始化）

在App.vue中（所有這個reportingRecord.vue頁面已經是會快取起來了）

<keep-alive :include="['reportingRecord']">
    <router-view></router-view>
</keep-alive>

在配置路由引數

　　{
        path: '/reportingRecord',
        name: 'reportingRecord',
        meta: {
            keepAlive: true, //用於控制是否初始化頁面，true：
 
初始化頁面，false：使用快取頁面

　　　　 }, component: reportingRecord 　　},

在reportingRecord.vue（列表頁）

　　activated(){
        if(this.$route.meta.keepAlive){
            this.reportingRecord();//當時true的時候，初始化資料          
        }
    },
    beforeRouteLeave(to, from, next) {
         // 離開路由之前取消本頁面的快取
        if (to.path == '/reportingRecordInfo') {
            
 
this.$route.meta.keepAlive = false; //當從reportingRecordInfo.vue頁面跳轉回來的時候，不要去執行初始化資料的this.reportingRecord()方法

　　　　　}else{ 　　　　　　　　this.$route.meta.keepAlive = true; 　　　　　} 　　　　　next(); 　　},

情況二：子路由之間的切換，和詳情跳轉到列表頁時，列表頁不初始化資料；其他頁面跳轉到列表頁再進行初始化資料（原理，思路同上，建議看懂情況一先）

在App中

<keep-alive :include="['rechargeOrder']">
    <router-view></router-view>
</keep-alive>

在配置路由引數

　　{
        path: '/rechargeOrder',
        name: 'rechargeOrder',
        component: rechargeOrder,
        redirect: '/noPayPrice',
        children: [{
                path: '/payPrice',
                name: 'payPrice',
                component: payPrice
            },
            {
                path: '/noPayPrice',
                name: 'noPayPrice',
                component: noPayPrice
            }
        ]
    },

在vuex儲存狀態

在其中一個子路由頁面

　　computed:{
        ...mapState(['keepAlive1','keepAlive2']),
    },
    activated() {
        console.log('stateka2', this.keepAlive1);
        if (this.keepAlive1) {
            this.noPayLists();
        }
    },
    beforeRouteLeave (to, from, next) {
        if (to.path != '/index') {
            this.cacheNoPay(false)
            console.log('1111',this.keepAlive1);
            
        }else{
            this.cacheNoPay(true)
            this.cachePay(true)
        }
        next()
    },　　methods:{

另一個子路由頁面同理

computed:{
        ...mapState(['keepAlive1','keepAlive2']),
    },
    activated() {
        //初始化資料
        // console.log('stateka1', this.keepAlive1);
        if (this.keepAlive2) {
            this.payLists(); 
        }
    },
    beforeRouteLeave (to, from, next) {
        if (to.path != '/index') {
            this.cachePay(false)
        }else{
            this.cacheNoPay(true)
            this.cachePay(true)
        }
        next()
    },

　　methods:{

總之就是在keep-alive標籤中加入你要快取的頁面name，然後控制一個引數判斷是否需要重新初始化