router-view中綁定key='$route.fullPath'

原文鏈接https://www.jianshu.com/p/cf2fb443620f 來源：簡書 作者：myzony

不設置 router-view 的 key 屬性

由於 Vue 會復用相同組件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 這類鏈接跳轉時, 將不在執行 created,mounted 之類的鈎子, 這時候你需要在路由組件中, 添加 beforeRouteUpdate 鈎子來執行相關方法拉去數據。
相關鈎子加載順序為：beforeRouteUpdate

設置 router-view 的 key 屬性值為 $route.path

從 /page/1 => /page/2, 由於這兩個路由的 $route.path 並不一樣, 所以組件被強制不復用。
相關鈎子加載順序為：beforeRouteUpdate => created => mounted

從 /page?id=1 => /page?id=2, 由於這兩個路由的 $route.path 一樣, 所以和沒設置key屬性一樣, 會復用組件。
相關鈎子加載順序為：beforeRouteUpdate

設置 router-view 的 key 屬性值為 $route.fullPath

從 /page/1 => /page/2, 由於這兩個路由的 $route.fullPath 並不一樣, 所以組件被強制不復用。
相關鈎子加載順序為：beforeRouteUpdate => created => mounted

從 /page?id=1 => /page?id=2, 由於這兩個路由的 $route.fullPath 並不一樣, 所以組件被強制不復用。
相關鈎子加載順序為：beforeRouteUpdate => created => mounted

個人理解：

在<router-view :key='$route.fullPath'>中，通過綁定一個fullPath，可以識別當前頁面路由的完整地址，當地址發生改變(包括參數改變)則重新渲染頁面(例如動態路由參數的變化)