vue 返回重新整理頁面 不keepAlive
阿新 • • 發佈：2019-01-07
問題：
vue專案，從A頁面進入B頁面，再返回A頁面的時候，頁面不重新整理。
舉例：
從列表頁面，選擇一條資料點選進去檢視詳情，這時候頁面重新整理了，並且執行了 created（）方法和 mounted（）方法，這個時候返回上一頁，也就是列表頁面，選擇另外一條資料點選進來檢視詳情，頁面上保留的還是上一條資訊，並且沒有執行created（）方法，直接執行了 mounted（）方法。
思考：
一開始我想到的是，頁面新增重新整理就行了，把 window.location.reload() ; 新增到 mounted（
然後我發現，在詳情頁面上我設定了keepAlive（程式碼見小圖，此小圖可放大 
），頁面快取了，所以沒重新整理，這時候第二條思路出現了，取消 keepAlive 就行了啊，開始搜 ‘vue 返回不keeplive’ ，連結見文末，但是我App.vue 頁面上並沒有使用 <router-view></router-view> ， 作為萌新，就開始不曉得怎麼搞了。
這個時候我發現第三條路，雖然我沒使用 <router-view></router-view>
），（ 這裡簡單介紹一下導航守衛 beforeRouteLeave 的一些引數 ，to:router 即將要進入的路由物件，from:router 當前導航正要離開的路由 ，next() 進行管道中的下一個鉤子 ，最後要確保呼叫 next 方法，否則鉤子不會被 resolved，不清楚的可以複製下面程式碼，檢視列印結果），這個是離開路由前執行的方法，那麼我只要在離開這個頁面之前，重新整理一下頁面，就相當於是在下次點選列表之前已經重新整理了頁面，問題解決！ beforeRouteLeave(to, from, next) {
console.log(to);
console.log(from);
console.log(next);
if (to.path === "/job") {
window.location.reload();
} else {
}
next ();
}反思：
這個屬於劍走偏鋒了，後期瞭解了<router-view></router-view> 之後再做改良，
連結地址：https://blog.csdn.net/leileibrother/article/details/79376502