#keep-alive緩存動態路由的使用指南#

代碼如下圖 ：

<router-view v-slot="{ Component }">    <keep-alive :include="['Hot', 'Notifications', 'User', 'Setting', 'Test']">                    <component :is="Component"  /></keep-alive>
</router-view>

講解：

一、v-slot="{ Component }"?的作用

這是 Vue 的作用域插槽語法，用于從?<router-view>?中獲取當前路由對應的組件實例。

具體解釋：

1. <router-view>?的職責
   Vue Router 的?<router-view>?是一個動態容器，會根據當前路由路徑渲染對應的組件（例如?/home?渲染?HomeComponent，/about?渲染?AboutComponent）。

2. 作用域插槽的暴露
   通過?v-slot="{ Component }"，<router-view>?會將當前匹配到的組件實例以?Component?變量的形式暴露給父組件。

3. 為何需要這個語法？
   為了在?<router-view>?外層包裹其他邏輯（如添加動畫、緩存控制等），需要先獲取到當前路由對應的組件實例，再手動渲染它。

二、:is="Component"?的作用

這是 Vue 的動態組件語法，用于動態決定要渲染哪個組件。

具體解釋：

1. <component>?元素
   Vue 內置的?<component>?是一個特殊元素，它通過?:is?屬性綁定要渲染的組件。

2. 與路由結合
   在路由場景中，Component?是從?<router-view>?的作用域插槽中獲取的當前路由組件。等價于直接渲染?<router-view>?的內容，但通過這種寫法可以添加額外邏輯（例如包裹?<keep-alive>）。

三、include?的作用

1. 核心功能

• 緩存白名單：include?接受一個組件名稱的數組（字符串或正則表達式），只有匹配名稱的組件才會被?<keep-alive>?緩存。

• 避免重復渲染：被緩存的組件切換時不會觸發?onMounted?生命周期，而是通過?onActivated/onDeactivated?管理狀態。

2.?必須匹配組件的?name?選項

• 組件定義時必須顯式聲明?name
  被緩存的組件需要在其選項中明確設置?name?字段

Tip：

一個小tip，如果要保持路由緩存，相關跳轉不要用a標簽，用route.push()，不然會導致路由重新加載