Vue中的keep-alive組件可以緩存之前渲染的組件實例,防止其被銷毀。使用include指令可以控制緩存哪些組件實例,以實現更靈活的緩存管理。
include指令可以接收字符串或正則表達式,匹配組件的name屬性或路由的名稱。只有匹配成功的組件實例才會被緩存。
<template> <div> <!-- 使用字符串匹配組件name --> <keep-alive :include="'MyComponent'"> <router-view></router-view> </keep-alive> <!-- 使用正則表達式匹配路由名稱 --> <keep-alive :include="/^home$|^about$/"> <router-view></router-view> </keep-alive> </div> </template>
上述代碼中,第一個keep-alive只緩存了name為“MyComponent”的組件實例,而第二個keep-alive則匹配了路由名稱為“home”或“about”的組件實例。
需要注意的是,include并不影響exclude指令的匹配結果。如果一個組件實例既符合include的條件,又符合exclude的條件,那么它將被排除在緩存之外。