使用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(); }};

從詳情頁返回主頁時把主頁的keepAlive值設置為true（要做個判斷，判斷是不是返回到主頁的）

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(to,from,next){}，它是methods平級的，具體使用方法可以查閱一下。

注意問題：

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

以上這篇解決vue單頁使用keep-alive頁面返回不刷新的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。