vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作
業(yè)務(wù)需求
打野在A頁(yè)面野區(qū)進(jìn)行一波騷操作打了一只藍(lán)爸爸，然后點(diǎn)擊導(dǎo)航欄跑到B頁(yè)面的野區(qū)秀操作打了一只紅爸爸，然后他又回到A野區(qū)，希望A野區(qū)還是只有一只藍(lán)爸爸被打的狀態(tài)，其他野沒(méi)被偷
第一步
在路由里面設(shè)置需要緩存的頁(yè)面
第二步
使用keep-alive屬性包裹需要緩存的頁(yè)面使用v-if判斷，為true的是需要緩存的，false是不需要緩存的
第三步
在需要緩存的頁(yè)面設(shè)置導(dǎo)航鉤子，在A野區(qū)離開(kāi)時(shí)將值設(shè)置為false保證離開(kāi)當(dāng)前野區(qū)不被偷
第四步
在其他野區(qū)浪一波離開(kāi)時(shí)設(shè)置為true,保證回到A野區(qū)的時(shí)候野區(qū)不被刷新，還是原來(lái)的狀態(tài)
補(bǔ)充知識(shí)：vue keep - alive 使用只有從固定頁(yè)面跳轉(zhuǎn)過(guò)來(lái)的才緩存當(dāng)前頁(yè)面
問(wèn)題描述
使用 keep-alive + beforeRouteLeave 判斷進(jìn)入緩存頁(yè)面的時(shí)候設(shè)置 keep-alive為true或false 但是無(wú)法滿(mǎn)足需求 造成A頁(yè)面 跳轉(zhuǎn)到 B頁(yè)面之后 無(wú)緩存 C頁(yè)面跳轉(zhuǎn)到B頁(yè)面后 有緩存 但是 再次從A頁(yè)面跳轉(zhuǎn)到B頁(yè)面 B頁(yè)面跳轉(zhuǎn)C頁(yè)面完成后把上次的數(shù)據(jù)帶出來(lái)了
解決方法
A - B 或 C-B都設(shè)置緩存 觸發(fā)keep-alive的activated 鉤子 利用 vuex在B頁(yè)面判斷是從哪個(gè)頁(yè)面跳轉(zhuǎn)過(guò)來(lái)的 如果是從A頁(yè)面跳轉(zhuǎn)過(guò)來(lái)的 重置B頁(yè)面所有數(shù)據(jù) 否則不進(jìn)行任何操作就行了
以上這篇vue頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面緩存操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue的el-select綁定的值無(wú)法選中el-option問(wèn)題及解決
這篇文章主要介紹了vue的el-select綁定的值無(wú)法選中el-option問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3+ts中ref與reactive指定類(lèi)型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類(lèi)型的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼
這篇文章主要介紹了Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
本篇文章主要介紹了vue小圖標(biāo)favicon不顯示的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可改變購(gòu)物數(shù)量的購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解
這篇文章主要介紹了基于vue+element實(shí)現(xiàn)全局loading過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁(yè)面都需要用到表格組件el-table,如果沒(méi)有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下2023-07-07
3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用
這篇文章主要介紹了3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02
uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動(dòng)態(tài)傳參代碼示例
最近外部公司的app要接入我司的uni H5項(xiàng)目,所以這篇文章主要給大家介紹了關(guān)于uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動(dòng)態(tài)傳參的相關(guān)資料,需要的朋友可以參考下2024-04-04