下面我就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題，具有很好的參考價值，希望對大家有所幫助。
使用vue單頁開發專案時遇到一個很噁心的問題：在清單頁點擊一條資料進入詳情頁，按返回鍵返回清單頁時頁面刷新了，使用者體驗非常差啊！ ！ ！查閱了一下相關問題，用
首先在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();
}
};上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
以上是解決vue單頁使用keep-alive頁面傳回不刷新的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
