下面我就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題,具有很好的參考價值,希望對大家有所幫助。
使用vue單頁開發專案時遇到一個很噁心的問題:在清單頁點擊一條資料進入詳情頁,按返回鍵返回清單頁時頁面刷新了,使用者體驗非常差啊! ! !查閱了一下相關問題,用
首先在App.vue頁面上有下面一段程式碼,我們都知道這是頁面渲染的地方
1 |
|
把這段程式碼改成如下:
1 2 3 4 |
|
我們可以看到這段程式碼所做的邏輯判斷,當路由的meta屬性的keepAlive屬性值為true時頁面的狀態保存,其他情況下不儲存狀態。
然後就是給我們路由設定keepAlive屬性值,例如我是給首頁(列表頁)的路由設定了keepAlive屬性為true。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
這樣設定了之後,主頁的狀態就會儲存,返回鍵返回到主頁時頁面不會刷新請求資料了。
但是有問題啊! ! !從主頁跳到任何頁面,再返回主頁都不會刷新頁面!這不是我想要的,我只要從詳情頁返回列表頁時不刷新頁面,其他情況下是需要刷新的,那麼我就需要定制化處理了。大致想法就是從主頁跳到其他頁面時把主頁的keepAlive值設為false,從詳情頁返回主頁時把主頁的keepAlive值設為true就好了,代碼如下:
#主頁跳轉到其他頁面時把主頁的keepAlive值設為false
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
從詳情頁返回主頁時把主頁的keepAlive值設為true(要做個判斷,判斷是不是返回主頁的)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
上面是我整理給大家的,希望未來會對大家有幫助。
相關文章:
以上是解決vue單頁使用keep-alive頁面傳回不刷新的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!