目錄
前言
基於vue-cli腳手架開發的單頁應用有他特殊的特點和優勢。因爲是單頁應用，所以在進行F5刷新的時候和之前常規的html頁面還有區分。主要區別在於，vue-router接管了瀏覽器的前進、後退、刷新等事件，通過對相關事件的監聽，動態的操作popstate,pushstate,replacestate等api來完成瀏覽器url的變化；但其實對於頁面本身而言，並沒有我們所理解的常規刷新或者後退前進操作，畢竟是單頁應用，內部的核心還是動態的div切換或者dom元素的動態渲染。
本篇通過對F5刷新操作的跟蹤，我們來記錄和了解一下vue組件是如何對對刷新操作進行處理的，各個組件的生命週期又是如何進行操作的，又有哪些點是需要我們注意的。
問題描述
我們先來看一個具體的問題，實際項目中，登錄成功之後的頁面是一個左右結構的頁面，假設爲組件A，左側是菜單區域，右側是顯示區域，我們的做法是在右側區域添加一個<router-view>，通過左側菜單的點擊，動態的改變右側router-view中的頁面效果。首次登陸成功之後，要顯示一個默認頁面，我們在組件A的create中獲取菜單樹，然後判斷菜單的id是否頂級，如果是則自動顯示，假設默認組件是B。然後選擇左側菜單，跳轉新頁面，右側區域渲染，假設我們顯示了C組件，此時F5刷新，頁面會自動回到組件B，也就是說，刷新操作無法刷“當前頁”，只要刷新總會返回首頁。
問題分析
我們在根組件A的beforeRouteEnter鉤子函數中將to、from打印出來。然後我們通過左側菜單點擊，頁面跳轉到manager_device_list路由頁面，然後點擊F5刷新，打印的to 和 from如下
可以看到from的null，to就是我們當前的路由頁面，但是爲何會自動跳轉到首頁B去了呢？
這裏就要說一下F5刷新時候組件的生命週期。
F5刷新的時候，會從跟組件重新走生命週期，即其實是從root.vue開始重新走聲明週期，然後一級一級往下走，根據to路由最終到具體的渲染頁面，問題就是出在這裏，因爲我們在跟組件A的create方法中循環菜單並自動跳轉到首頁了，所以在F5之後重新走跟組件聲明週期時，在create中直接就把路由改變了，而不會再回到原來的to。
問題解決
通過再跟組件A的beforeRouteEnter鉤子函數中判斷from.name是否爲null,來操作是否走自動到首頁的邏輯。相關代碼如下：
beforeRouteEnter(to, from, next) {
console.log("to--->",to);
console.log("from--->",from);
if(ctool.strIsEmpty(from.name)){
next();
}else{
next(vm => vm.initViews());
}
},
這裏initViews中就是循環菜單找到首頁並跳轉到首頁的邏輯。通過上面這種處理，完美解決該問題。
總結
(1) 不管是在瀏覽器中還是通過this.$router.push跳轉某個頁面時候，路由都是會從跟組件開始走，最終定位到具體的子組件，並在其對應的router-view中渲染，尤其是router-view嵌套router-view時候會看的更清晰，子組件始終是在父組件的生命週期走完再開始渲染。即：如果出現刷新後，頁面沒有留在當前頁，那肯定是代碼邏輯處理的有問題。
(2) F5刷新操作會清空store中的數據，所以般情況下，我們可以通過監聽瀏覽器的刷新事件，在跟組件中對store中的數據通過localstorage進行保存和還原。