多路由復用頁面組件問題
本文圍繞
Vue Router中路由組件復用問題展開
場景復現
項目中經常會遇到增改查的需求，通常採用不同的路由指向同一個頁面組件，以此到達復用頁面的功能，但是復用頁面存在一些狀態問題。
以下情況均不快取頁面：
分兩種情況，均為動態路由匹配
-
(1) 路由a:
/detail/1， 路由b:/detail/2。 路由表裡匹配/detail/:id -
(2) 路由A:
/new-detail/1， 路由B:/edit-detail/1。 路由表裡匹配/new-detail/:id， 和/edit-detail/:id
這四個不同的url，註冊的是同一個頁面組件
在場景（1）中，切換頁面，只調用beforeRouteUpdate鉤子函數，不調用beforeRouteEnter、mounted等，可以監聽到$route，並獲取到激活組件裡面的數據，不會錯亂
在場景（2）中，切換頁面，調用beforeRouteEnter鉤子函數，不調用created、mounted等生命周期鉤子
beforeRouteUpdate重用的組件官方解釋（指的是動態路由匹配）
在當前路由改變，但是該組件被複用時調用，舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候
動態路由匹配
文檔請看這裡
響應路由參數的變化
當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。
復用組件時，想對路由參數的變化作出響應的話，有兩種方法
-
watch (監測變化) $route 對象
-
使用 2.2 中引入的 beforeRouteUpdate 導航守衛
使用beforeRouteUpdate的時候，如果路由裡面通過布爾模式：props: true 將組件和路由解耦，這個時候會出現props獲取錯誤的情況，比方說從/foo/1頁面切換到/foo/2頁面的時候，在beforeRouteUpdate獲取到的還是失活頁面組件的id
在
beforeRouteUpdate鉤子中，在next回調函數中編寫程式碼並沒有執行，彷彿沒有調用，但是去掉next()，路由就不會放行，有點奇怪。需要閱讀源碼實現邏輯…
完整的導航解析流程
-
導航被觸發
-
beforeRouteLeave（失活組件里調用） 可以訪問組件實例
this -
beforeEach（全局前置鉤子）
-
beforeRouteUpdate（如果是重用組件，則調用） 可以訪問組件實例
this -
beforeEnter（路由配置里，路由獨享的）
-
解析非同步路由組件（如果有）
-
beforeRouteEnter（被激活組件里調用）
-
beforeResolve（全局解析守衛）
-
導航被確認
-
afterEach（全局後置鉤子）
-
觸發 DOM 更新。
-
beforeRouteEnter （調用守衛中傳給 next 的回調函數，創建好的組件實例會作為回調函數的參數傳入。next(vm) => {}）
接著調用created、mounted等等
🌹 持續更文，關注我，你會發現一個踏實努力的寶藏前端😊，讓我們一起學習，共同成長吧。
🎉 喜歡的小夥伴記得點贊關注收藏喲，回看不迷路 😉
🎁 歡迎大家評論交流, 蟹蟹😊
