響應路由參數(shù)的變化
使用帶有參數(shù)的路由時，當用戶從/users/tom導航到/users/bob時，相同的組件實例將被重復使用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會被調(diào)用。
問題：一級分類的切換正好滿足上面的條件，組件實例復用，導致分類數(shù)據(jù)無法更新
routes: [{
path: '/',
component: Layout,
children: [{
path: '',
component: Home
}, {
path: '/category/:id',
component: Category
}]
}]
路由緩存問題.gif
如上圖動畫顯示：路由變化了，但是頁面還有緩存，數(shù)據(jù)未變化，需要手動刷新一下頁面數(shù)據(jù)才會變化。
解決上面路由緩存問題的思路：
- 讓組件實例不復用，強制銷毀重建
- 監(jiān)聽路由變化，變化之后執(zhí)行數(shù)據(jù)更新操作
方案一：給 router-view 添加 key
以當前路由完整路徑為key的值，給router-view組件綁定
<RouterView :key="$route.fullpath">
最常見的用例是v-for結(jié)合：
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
也可用于強制替換一個元素或組件而不是復用它。當你想這么做時他可能會很有用：
- 在適當?shù)臅r候觸發(fā)組件的生命周期鉤子
-
觸發(fā)過渡
添加key.gif
如上圖，但是這樣在我們上面的項目中會造成banner接口重復調(diào)用問題，造成資源浪費
方案二：使用beforeRouteUpdate導航鉤子
beforeRouteUpdate鉤子函數(shù)可以在每次路由更新之前執(zhí)行，在回調(diào)中執(zhí)行需要數(shù)據(jù)更新的業(yè)務邏輯即可
或者，使用beforeRouteUpdate，它也可取消導航：
const User={
template: '...',
async beforeRouteUpdate(to, from) {
// 對路由變化做出響應
this.userData = await fetchUser(to.params.id)
}
}
在項目中修改：
import { onBeforeRouteUpdate } from "vue-router";
// 目標:路由參數(shù)變化的時候，可以把分類數(shù)據(jù)接口重新發(fā)送
onBeforeRouteUpdate((to) => {
console.log(to);
getCategoryAPI(to.params.id)
});
onBeforeRouteUpdate.gif
如上圖： 發(fā)現(xiàn)banner接口沒有存在多余請求了
總結(jié)
- 路由緩存問題產(chǎn)生的原因是什么？
答：路由只有參數(shù)變化時，會復用組件實例
- 兩種方案都可以解決路由緩存問題，如何選擇呢？
答：在意性能問題，選擇 onBeforeRouteUpdate，精細化控制
不在意性能問題，選擇添加 key，簡單粗暴
