vue中 給router-view 組件的 綁定 key 的原因

1. 不設置 router-view 的 key 屬性
   由於 Vue 會復用相同組件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 這類鏈接跳轉時, 將不在執行created, mounted之類的鈎子, 這時候你需要在路由組件中, 添加beforeRouteUpdate鈎子來執行相關方法拉去數據

相關鈎子加載順序為: beforeRouteUpdate

2. 設置 router-view 的 key 屬性值為 $route.path
   從/page/1 => /page/2, 由於這兩個路由的$route.path並不一樣, 所以組件被強制不復用, 相關鈎子加載順序為:
   beforeRouteUpdate => created => mounted

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

3. 設置 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
本文轉載自：https://blog.csdn.net/Terenceno/article/details/90033967