解決vue單頁(yè)使用keep-alive頁(yè)面返回不刷新的問(wèn)題

使用vue單頁(yè)開發(fā)項(xiàng)目時(shí)遇到一個(gè)很惡心的問(wèn)題：在列表頁(yè)點(diǎn)擊一條數(shù)據(jù)進(jìn)入詳情頁(yè)，按返回鍵返回列表頁(yè)時(shí)頁(yè)面刷新了，用戶體驗(yàn)非常差啊?。。〔殚喠艘幌孪嚓P(guān)問(wèn)題，使用<keep-alive>解決這個(gè)問(wèn)題，下面是我的使用心得。

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

首先在App.vue頁(yè)面上有下面一段代碼，我們都知道這是頁(yè)面渲染的地方

<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>

我們能看到這段代碼做的邏輯判斷，當(dāng)路由的meta屬性的keepAlive屬性值為true時(shí)頁(yè)面的狀態(tài)保存，其他情況下不保存狀態(tài)。

然后就是給我們路由設(shè)置keepAlive屬性值，比如我是給主頁(yè)（列表頁(yè)）的路由設(shè)置了keepAlive屬性為true。

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

這樣設(shè)置了之后，主頁(yè)的狀態(tài)就會(huì)保存，返回鍵返回到主頁(yè)時(shí)頁(yè)面不會(huì)刷新請(qǐng)求數(shù)據(jù)了。

但是有問(wèn)題?。。。闹黜?yè)跳到任何頁(yè)面，再返回主頁(yè)都不會(huì)刷新頁(yè)面！這并不是我想要的，我只要從詳情頁(yè)返回列表頁(yè)時(shí)不刷新頁(yè)面，其他情況下是需要刷新的，那么我就需要定制化處理了。大致思路就是從主頁(yè)跳轉(zhuǎn)到其他頁(yè)面時(shí)把主頁(yè)的keepAlive值設(shè)置為false，從詳情頁(yè)返回主頁(yè)時(shí)把主頁(yè)的keepAlive值設(shè)置為true就好了，代碼如下：

主頁(yè)跳轉(zhuǎn)到其他頁(yè)面時(shí)把主頁(yè)的keepAlive值設(shè)置為false

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表頁(yè)的meta值，false時(shí)再次進(jìn)入頁(yè)面會(huì)重新請(qǐng)求數(shù)據(jù)。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

從詳情頁(yè)返回主頁(yè)時(shí)把主頁(yè)的keepAlive值設(shè)置為true（要做個(gè)判斷，判斷是不是返回到主頁(yè)的）

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

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

JS中用EL表達(dá)式獲取上下文參數(shù)值的方法

JS實(shí)現(xiàn)左邊列表移到到右邊列表功能

js中el表達(dá)式的使用和非空判斷方法

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com