使用vue單頁開發專案時遇到一個很噁心的問題：在列表頁點選一條資料進入詳情頁，按返回鍵返回列表頁時頁面重新整理了，使用者體驗非常差啊！！！查閱了一下相關問題，使用<keep-alive>解決這個問題，下面是我的使用心得。

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

首先在App.vue頁面上有下面一段程式碼，我們都知道這是頁面渲染的地方

<router-view></router-view>

把這段程式碼改成如下：

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

我們能看到這段程式碼做的邏輯判斷，當路由的meta屬性的keepAlive屬性值為true時頁面的狀態儲存，其他情況下不儲存狀態。

然後就是給我們路由設定keepAlive屬性值，比如我是給主頁（列表頁）的路由設定了keepAlive屬性為true。

{
        name: 'index',
        path: '/index',
        title: '主頁',
        component(resolve) {
            require(['views/index.vue'], resolve)
        },
        meta: {
            pageTitle: '主頁',
            keepAlive: true
        }
    }
 

這樣設定了之後，主頁的狀態就會儲存，返回鍵返回到主頁時頁面不會重新整理請求資料了。

但是有問題啊！！！從主頁跳到任何頁面，再返回主頁都不會重新整理頁面！這並不是我想要的，我只要從詳情頁返回列表頁時不重新整理頁面，其他情況下是需要重新整理的，那麼我就需要定製化處理了。大致思路就是從主頁跳轉到其他頁面時把主頁的keepAlive值設定為false，從詳情頁返回主頁時把主頁的keepAlive值設定為true就好了，程式碼如下：

主頁跳轉到其他頁面時把主頁的keepAlive值設定為false

export default {
    data() {
        return {
        };
    },
    mounted() {
    },
    methods: {
    },
    //修改列表頁的meta值，false時再次進入頁面會重新請求資料。
    beforeRouteLeave(to, from, next) {
        from.meta.keepAlive = false;
        next();
    }
};
 

export default {
    data() {
        return {
        };
    },
    mounted() {
    },
    methods: {
    },
    beforeRouteLeave(to, from, next) {
      if (to.path == "/index") {
        to.meta.keepAlive = true;
      } else {
        to.meta.keepAlive = false;
      }
      next();
    }
};

注意問題：

beforeRouterLeave必須寫在有配置路由的頁面上才有效的，最開始我想寫在App.vue頁面上，發現根本就不執行的！