Vue 實現前進刷新，後退不刷新的效果

需求一：

在一個列表頁中，第一次進入的時候，請求獲取數據。
點擊某個列表項，跳到詳情頁，再從詳情頁後退回到列表頁時，不刷新。
也就是說從其餘頁面進到列表頁，須要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。

解決方案

假設列表頁爲 list.vue，詳情頁爲 detail.vue，這兩個都是子組件。
咱們在 keep-alive 添加列表頁的名字，緩存列表頁。
而後在列表頁的 created 函數裏添加 ajax請求，這樣只有第一次進入到列表頁的時候纔會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。
這樣就能夠解決問題了。

 

需求二：

在需求一的基礎上，再加一個要求：能夠在詳情頁中刪除對應的列表項，這時返回到列表頁時須要刷新從新獲取數據。

 

這樣就不須要在列表頁的 created 函數裏用 ajax 來請求數據了，統一放在 App.vue 裏來處理。
觸發請求數據有兩個條件：

1. 從其餘頁面（除了詳情頁）進來列表時，須要請求數據。

2. 從詳情頁返回到列表頁時，若是詳情頁 meta 屬性中的 isRefresh 爲 true，也需求從新請求數據。

當咱們在詳情頁中刪除了對應的列表項時，就能夠將詳情頁 meta 屬性中的 isRefresh 設爲 true。這時再返回到列表頁，頁面會從新刷新

 

 

 

 

擦考：https://segmentfault.com/a/1190000019414890