vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作
業(yè)務(wù)需求
打野在A頁面野區(qū)進(jìn)行一波騷操作打了一只藍(lán)爸爸，然后點(diǎ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í)將值設(shè)置為false保證離開當(dāng)前野區(qū)不被偷
第四步
在其他野區(qū)浪一波離開時(shí)設(shè)置為true,保證回到A野區(qū)的時(shí)候野區(qū)不被刷新，還是原來的狀態(tài)
補(bǔ)充知識：vue keep - alive 使用只有從固定頁面跳轉(zhuǎn)過來的才緩存當(dāng)前頁面
問題描述
使用 keep-alive + beforeRouteLeave 判斷進(jìn)入緩存頁面的時(shí)候設(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頁面判斷是從哪個(gè)頁面跳轉(zhuǎn)過來的 如果是從A頁面跳轉(zhuǎn)過來的 重置B頁面所有數(shù)據(jù) 否則不進(jìn)行任何操作就行了
以上這篇vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue的el-select綁定的值無法選中el-option問題及解決
這篇文章主要介紹了vue的el-select綁定的值無法選中el-option問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3+ts中ref與reactive指定類型實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定類型的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼
這篇文章主要介紹了Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
本篇文章主要介紹了vue小圖標(biāo)favicon不顯示的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
vue實(shí)現(xiàn)可改變購物數(shù)量的購物車
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
基于vue+element實(shí)現(xiàn)全局loading過程詳解
這篇文章主要介紹了基于vue+element實(shí)現(xiàn)全局loading過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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),很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會平均分配給剩余的列,需要的朋友可以參考下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ì),對大家的學(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