帶有分頁的列表的跳轉後,返回時怎麼實現保留分頁的頁數等資訊
阿新 • • 發佈:2018-12-17
我們通過一個列表,進入了下一個頁面,返回列表頁面的時候,怎麼實現保留頁面資料
eg:當我們從列表的第4頁去編輯這條資訊,那麼當編輯完成後我們是不是返回到列表頁,那麼列表頁應該顯示第幾頁的資料呢?
解決方案:(樓主的專案是vue+element)
- 攜帶引數
當頁面跳轉的時候,將頁碼等需要儲存的資料,放在路由的引數中,傳遞到跳轉頁面,當完成後,最後回調回來,將引數帶回來,初始化列表資料。正常的在切換頁面是沒有問題的
-
但是有問題,重新整理的時候,還是第4頁的資料呀,所以可以通過以下方法進行判斷,在vue的頁面中判斷一下路由
通過判斷from的path。如果是編輯頁返回的,那麼就將回帶回來的引數賦值,重新進行初始化列表資料;如果path=“/”,那麼就是重新整理瀏覽器進行的,那麼就所有條件清空,初始化列表資料。
-
傳遞引數要放在vue路由的query中,不要放在params中。因為params在瀏覽器重新整理會被清掉,在url中的query中就不會出現清掉的情況
-
-
做成元件
通過和後端大哥交流,大哥給的方案,和大家分享一下,就是將列表和編輯頁面分別做成元件,通過元件的顯示和隱藏進行切換。-
通過顯隱切換,這樣就很方便的實現快取資料的問題
-
當進入編輯頁面,點選瀏覽器的回退按鈕,不會回退到列表頁面。因為都是元件,就在一個頁面中
-
在元件的形式中,請注意記憶體的資料。有些資料會常駐記憶體。
-
-
將資訊存在本地
將第一中方法中的資料存在瀏覽器的storage中就可以了,或者cookie也可以(最好不要),但是不能存在vuex,因為重新整理會被清掉