vue單頁實現前進刷新後退不刷新

前言：首先什麼是「前進刷新後退不刷新」呢，好比我有一個數據列表頁A、數據詳情頁B和其餘頁面C，在瀏覽頁面A而後進入B之後，若是返回頁面A 那原來瀏覽的頁碼總要保存吧，不能每次人家返回都要從第一頁開始從新翻，這就須要後退不刷新了。 那麼前進不刷新就是用戶從其餘頁C進入A，天然是要從第一頁開始的，不須要保存狀態因此要刷新。

首先，先實現後退不刷新來： 在vue-router中 有提供一個keep-alive的標籤，剛開始我也不知道這貨幹嗎用的 ，直到此次。 它的做用從字面意思就是保存活性，即會保存其中內容不會銷燬，用法：

這樣在路由離開當前頁的時候，組件就不會被銷燬了,可是也不是全部的頁面都須要保存的，怎麼辦呢，這時候就須要條件來判斷了

1.在每一個路由設置中的meta對象添加一個keepAlive屬性，以下:

2.而後前面的keep-alive換個用法，只在當前路由的keepalive屬性爲true的時候才用keep-alive包裹

作到這一步，就實現了頁面不刷新，但這個不刷新是無腦的 並非有選擇的，怎麼實現按照狀況刷新和不刷新呢？那固然須要判斷條件了對不對，判斷什麼呢？判斷從哪一個頁面進來的應該能夠，我們試試 在A頁面組件beforeRouteEnter（有關router的生命週期請自行查閱資料）鉤子中添加判斷， if(from.name === 'B')｛｝，若是是從B頁面返回的那就重新獲取數據，可是問題來了。此時（beforeRouteEnter）沒法獲取vue實例，因此不能在這裏直接調用組件的數據更新方法，因此咱們須要在路由中meta對象添加一個requireAuth屬性（屬性名隨意）用來保存判斷，而後在activated鉤子中（此時已經能夠獲取this實例）經過判斷requireAuth來決定時候更新數據。如圖：

此時，頁面應該已經實現根據條件來決定是否刷新數據。

---

我忽然想到一個問題 既然在beforeRouteEnter中判斷時不能獲取this實例，致使須要在路由中存一個變量而後在activated中執行函數。那麼爲何不在activated中直接判斷並執行呢？？？

哦好吧。 activated鉤子沒有from參數的樣子。。。。