使用<keep-alive />保存狀態(tài)
1.在app.vue里使用keepalive
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
2.在需要保存狀態(tài)的頁(yè)面路由下寫(xiě)入keepAlive
{
path: '/index',
name: 'index',
component: index,
meta: {
keepAlive: true
}
},
3.在列表頁(yè)通過(guò)路由守衛(wèi)beforeRouteLeave叉钥，判斷當(dāng)前頁(yè)面即將跳轉(zhuǎn)的頁(yè)面涡拘，如果是跳轉(zhuǎn)詳情頁(yè)谁鳍，就保持當(dāng)前頁(yè)面的keepAlive為true，來(lái)緩存列表頁(yè)面思喊，否則false，用來(lái)防止列表頁(yè)返回其他頁(yè)面后粪摘，再次訪(fǎng)問(wèn)列表頁(yè)時(shí)數(shù)據(jù)不刷新的問(wèn)題
beforeRouteLeave(to, from, next) {
//[].includes() 是es7寫(xiě)法枯芬，用來(lái)判斷某個(gè)數(shù)組里是否包含有個(gè)元素，這里前邊放詳情頁(yè)的名字,to.name是指即將跳轉(zhuǎn)頁(yè)面的name
if (["indexDetail"].includes(to.name)) {
from.meta.keepAlive = true;
} else {
from.meta.keepAlive = false;
}
next();
}
