一、keep-alive
簡介
keep-alive
是Vue內置的一個組件,可以使被包含的組件保留狀態,或避免重新渲染。
用法:
<keep-alive>
<component>
<!-- 該組件將被緩存! -->
</component>
</keep-alive>
props
include-字符串或正則表達式,只有匹配的組件會被緩存
exclude-字符串或正則表達式,任何匹配的組件都不會被緩存
//組件 a
export default {
name: 'a',
data () {
return {}
}
}
<keep-alive include="a">
<component>
<!-- name 爲 a 的組件將被緩存! -->
</component>
</keep-alive>可以保留它的狀態或避免重新渲染
<keep-alive exclude="a">
<component>
<!-- 除了 name 爲 a 的組件都將被緩存! -->
</component>
</keep-alive>可以保留它的狀態或避免重新渲染
遇見vue-router
router-view
也是一個組件,如果直接被包在keep-alive
裏面,所有路徑匹配到的視圖組件都會被緩存:
<keep-alive>
<router-view>
<!-- 所有路徑匹配到的視圖組件都會被緩存! -->
</router-view>
</keep-alive>
問題
如果只想router-view裏面某個組件被緩存,怎麼辦?
1、使用include/exclude
2、增加router.meta屬性
第一種方法上面已經描述,下面說第二種方法
增加router.meta屬性
// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被緩存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被緩存
}
}
]
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 這裏是會被緩存的視圖組件,比如 Home! -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 這裏是不被緩存的視圖組件,比如 Edit! -->
</router-view>
《附加》使用 router.meta 拓展
假設這裏有 3 個路由: A、B、C。
需求:
默認顯示 A
B 跳到 A,A 不刷新
C 跳到 A,A 刷新
實現方式:
在 A 路由裏面設置 meta 屬性:
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被緩存
}
}
在 B 組件裏面設置 beforeRouteLeave:
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設置下一個路由的 meta
to.meta.keepAlive = true; // 讓 A 緩存,即不刷新
next();
}
};
在 C 組件裏面設置 beforeRouteLeave:
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設置下一個路由的 meta
to.meta.keepAlive = false; // 讓 A 不緩存,即刷新
next();
}
};
這樣便能實現 B 回到 A,A 不刷新;而 C 回到 A 則刷新。
總結
路由大法不錯,不需要關心哪個頁面跳轉過來的,只要 router.go(-1) 就能回去,不需要額外參數。
然而在非單頁應用的時候,keep-alive 並不能有效的緩存了= =