vue頁面跳轉(zhuǎn)實現(xiàn)頁面緩存操作
業(yè)務(wù)需求
打野在A頁面野區(qū)進(jìn)行一波騷操作打了一只藍(lán)爸爸，然后點擊導(dǎo)航欄跑到B頁面的野區(qū)秀操作打了一只紅爸爸，然后他又回到A野區(qū)，希望A野區(qū)還是只有一只藍(lán)爸爸被打的狀態(tài)，其他野沒被偷
第一步
在路由里面設(shè)置需要緩存的頁面
第二步
使用keep-alive屬性包裹需要緩存的頁面使用v-if判斷，為true的是需要緩存的，false是不需要緩存的
第三步
在需要緩存的頁面設(shè)置導(dǎo)航鉤子，在A野區(qū)離開時將值設(shè)置為false保證離開當(dāng)前野區(qū)不被偷
第四步
在其他野區(qū)浪一波離開時設(shè)置為true,保證回到A野區(qū)的時候野區(qū)不被刷新，還是原來的狀態(tài)
補充知識：vue keep - alive 使用只有從固定頁面跳轉(zhuǎn)過來的才緩存當(dāng)前頁面
問題描述
使用 keep-alive + beforeRouteLeave 判斷進(jìn)入緩存頁面的時候設(shè)置 keep-alive為true或false 但是無法滿足需求 造成A頁面 跳轉(zhuǎn)到 B頁面之后 無緩存 C頁面跳轉(zhuǎn)到B頁面后 有緩存 但是 再次從A頁面跳轉(zhuǎn)到B頁面 B頁面跳轉(zhuǎn)C頁面完成后把上次的數(shù)據(jù)帶出來了
解決方法
A - B 或 C-B都設(shè)置緩存 觸發(fā)keep-alive的activated 鉤子 利用 vuex在B頁面判斷是從哪個頁面跳轉(zhuǎn)過來的 如果是從A頁面跳轉(zhuǎn)過來的 重置B頁面所有數(shù)據(jù) 否則不進(jìn)行任何操作就行了
以上這篇vue頁面跳轉(zhuǎn)實現(xiàn)頁面緩存操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇element-ui 上傳圖片后清空圖片顯示的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器
這篇文章主要為大家詳細(xì)介紹了elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vscode中Vue別名路徑提示的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了vue 開發(fā)企業(yè)微信整合,結(jié)合具體案例形式分析了vue.js使用企業(yè)微信JSSDK實現(xiàn)手機(jī)端程序可以和企業(yè)微信進(jìn)行整合功能的相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
Vue中使用matomo進(jìn)行訪問流量統(tǒng)計的實現(xiàn)
這篇文章主要介紹了Vue中使用matomo進(jìn)行訪問流量統(tǒng)計的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
本文主要介紹了vue中table表頭單元格合并(附單行、多級表頭代碼)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了Vue基礎(chǔ)之偵聽器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue中數(shù)組和對象更改后視圖不刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09