不設(shè)置 router-view 的 key 屬性

由于 Vue 會復(fù)用相同組件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 這類鏈接跳轉(zhuǎn)時(shí), 將不在執(zhí)行 created,mounted 之類的鉤子, 這時(shí)候你需要在路由組件中, 添加 beforeRouteUpdate 鉤子來執(zhí)行相關(guān)方法拉去數(shù)據(jù)。
相關(guān)鉤子加載順序?yàn)椋?code>beforeRouteUpdate

設(shè)置 router-view 的 key 屬性值為 $route.path

從 /page/1 => /page/2, 由于這兩個(gè)路由的 $route.path 并不一樣, 所以組件被強(qiáng)制不復(fù)用。
相關(guān)鉤子加載順序?yàn)椋?code>beforeRouteUpdate => created => mounted

從 /page?id=1 => /page?id=2, 由于這兩個(gè)路由的 $route.path 一樣, 所以和沒設(shè)置key屬性一樣, 會復(fù)用組件。
相關(guān)鉤子加載順序?yàn)椋?code>beforeRouteUpdate

設(shè)置 router-view 的 key 屬性值為 $route.fullPath

從 /page/1 => /page/2, 由于這兩個(gè)路由的 $route.fullPath 并不一樣, 所以組件被強(qiáng)制不復(fù)用。
相關(guān)鉤子加載順序?yàn)椋?code>beforeRouteUpdate => created => mounted

從 /page?id=1 => /page?id=2, 由于這兩個(gè)路由的 $route.fullPath 并不一樣, 所以組件被強(qiáng)制不復(fù)用。
相關(guān)鉤子加載順序?yàn)椋?code>beforeRouteUpdate => created => mounted

今天被這個(gè)坑了一波, 做個(gè)記錄。