vue實現前進後退保持頁面狀態,不被重新整理

2021-10-07 06:45:11 字數 616 閱讀 4932

在當前頁面進行一些操作,然後需要跳轉到其他頁面進行操作並取得結果,再返回到當前頁面繼續操作,此時需要保持當前頁面不被重新整理,才能繼續進行操作。但是由於vue的動態元件機制,跳轉頁面時會銷毀當前元件再建立其他頁面,如果需要儲存頁面狀態,就需要將頁面快取起來,再次進入的時候從快取裡讀取即可。

>

<

/keep-alive>

如果想要有針對性的儲存某個頁面的狀態,可以使用keep-alive提供的屬性:

"demo1,demo2"

>

//快取名稱是demo1和demo2的頁面,注意是元件的name屬性,不是路由的

>

<

/keep-alive>

"demo1,demo2"

>

//不快取名稱是demo1和demo2的頁面

>

<

/keep-alive>

"10"

>

//最多快取10個,一旦這個數字達到了,在新例項被建立之前,已快取元件中最久沒有被訪問的例項會被銷毀掉。

>

<

/keep-alive>

vue實現前進重新整理,後退不重新整理

專案中客戶提出返回列表頁需要快取之前查詢的資料,用到了以下方法解決了這個需求 實現思路 注 demo中,index頁面包含三個鏈結導航。page1 page2 page3.依次前進,每次前進到乙個新頁面都需要獲取資料,而按下後退鍵後,從page3返回到page2,page2不再獲取新資料,而是使用之...

瀏覽器前進後退時表單狀態的保持

先說一下各瀏覽器預設下,表單回退時的現象 除過ff以為,其餘瀏覽器都會儲存表單的狀態,ff加以後也儲存狀態成功 cache control取值有如下幾個 public,private,no cache,no store,no transform,must revalidate,proxy reval...

keep alive 實現後退不重新整理並保持滾動位置

vue可以通過元素包裹元件,實現快取,下次使用時不需要重新建立該元件。但存在乙個問題 keep alive包裹的元件中有滾動元素時,keep alive不會儲存滾動位置。實現後退不重新整理主要依據keep alive元件的activated和deactivated這兩個生命週期鉤子函式。vue鉤子函...