業(yè)務(wù)場景:從其他界面返回列表詳情界面,要求保留之前的頁碼

根據(jù)業(yè)務(wù)場景的細(xì)節(jié)需求,分為兩種實現(xiàn),一種是列表保留頁碼不刷新數(shù)據(jù),一種是保留列表但需要刷新數(shù)據(jù).

一,保留頁碼,不刷新數(shù)據(jù)

1,在路由中為列表組件設(shè)置

meta:?{??????keepAlive:?true?}??

2,在路由守衛(wèi)中做攔截處理

localStorage.from?=?true??if(detail.includes(from.path)?&&?list.includes(to.path))?{????localStorage.from?=?false??}

其中detail是詳情界面的路由數(shù)組,list是列表界面的路由數(shù)組,如下圖.

(此處的判斷是當(dāng)從詳情跳轉(zhuǎn)到列表的時候,變量from是false,其余情況是true.from變量是用于判斷頁面刷新的,from具體見3)

3,在每個列表界面進行判斷刷新

activated()?{????if?(JSON.parse(localStorage.from))?{??????this.query.page?=?1??????this.search();????}??},

頁面第一次進入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時觸發(fā)deactivated。當(dāng)再次進入（前進或者后退）時，只觸發(fā)activated。(引用來自 https://blog.csdn.net/HANGSOME123/article/details/97142383)

因此我們的刷新操作要放到activated中,當(dāng)from為true時(也就是說頁面是從其他地方進入列表的,這時列表就需要進行刷新操作,且頁碼應(yīng)該初始化為1),from為false的時候不觸發(fā)任何操作,此時頁面呈現(xiàn)為之前離開時候的渲染效果.

二,保留頁碼,且刷新數(shù)據(jù)

1,在列表界面,跳轉(zhuǎn)方法中存儲當(dāng)前頁碼值

localStorage.page?=?JSON.stringify(this.query.page)

2,在路由守衛(wèi)中,進行攔截判斷

跳轉(zhuǎn)情況不符合? 列表->詳情? 或 詳情->列表,則將本地存儲中的頁碼值置為0,符合情況不予處理

if(!((detailTemplateName.includes(from.name)?&&?listTemplate.includes(to.path))?||?(listTemplate.includes(from.path)?&&?detailTemplateName.includes(to.name)))){????localStorage.page?=?0??}

3,在列表界面

如果本地存儲中的值不為0,則執(zhí)行本地存儲頁碼值刷新列表,否則按照page=1刷新

?page?=?JSON.parse(localStorage.page)??????if(page?!=?0)?{????????this.query.page?=?page????????this.search(page)??????}else{????????this.search()??????}

4,查詢列表page參數(shù)正確,但是頁面顯示頁碼不一致(可能出現(xiàn)的情況)

在執(zhí)行完列表查詢后,成功之后,賦值total的位置書寫以下代碼(一定要加nextTick)

this.pageshow?=?false????????this.$nextTick(()?=>?{????　　??this.pageshow?=?true????　　})

其中pageshow是分頁的展示與否,如下圖

v-if="pageshow"

后記:

為什么動態(tài)控制keep-alive的值,再搭配this.$destroy()?

this.$destroy()之后keep-alive將不會生效

其次,keep-alive的動態(tài)控制之后,出現(xiàn)了一些視圖錯誤

例如 無法針對不同入口使用一個路由地址緩存,呈現(xiàn)出來的緩存始終是一個入口渲染的