vue.js 使用keep-alive設置返回不刷新

在首頁點擊一條數據進入詳情頁，按返回鍵返回首頁時頁面刷新了重新調用接口，用戶體驗比較差，不流暢，這裏整理總結一下我的解決方案。。。

<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重複渲染DOM。

原理：https://blog.csdn.net/zhangjing0320/article/details/80819652

<keep-alive>文章：https://www.cnblogs.com/goloving/p/9256212.html

直接代碼解釋：

1、APP.vue,設置緩存

       <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

2、index.js

{
            path: '/index',
            name: 'index',
            component: index,
            meta: {
                keepAlive: false  //默認不緩存
            }
        },

3、index.vue頁面，添加一下代碼，與methods方法同級。

      //修改首頁的meta值，false時再次進入頁面會重新請求數據。
        beforeRouteLeave(to, from, next) {
            from.meta.keepAlive = false;
            next();
        },

4、inquiredetail詳情頁面，添加一下代碼，與methods方法同級。

      //設置返回不刷新數據
        beforeRouteLeave(to, from, next) {
            if( to.path == "/index") {
                to.meta.keepAlive = true;
            } else {
                to.meta.keepAlive = false;
            }
            next();
        }, 

注意：beforeRouteLeave必須在有路由的頁面才生生效。