Vue路由組件的緩存keep-alive和include屬性
- 功能：瀏覽器頁面在進(jìn)行切換時(shí)，原有的路由組件會(huì)被銷毀。通過緩存可以保存被切換的路由組件。
- 例子：在頁面上填好的信息當(dāng)進(jìn)行頁面切換再轉(zhuǎn)回原來的頁面時(shí)，原本信息被清空了需要重新填寫
keep-alive和include屬性的搭配使用
- 功能：切換路由時(shí)，保留被切換路由組件。
- 格式：
-
<keep-alive> <router-view/> <keep-alive>- 功能：保存所有路由組件
-
<keep-alive include="組件名稱"> <router-view/> <keep-alive>- 功能：保存include指定的組件，數(shù)組形式可保存多個(gè)
-
<template>
<div>
<div>
<ul>
<li><router-link to="/A">A1 Router-Link</router-link></li>
<li><router-link to="/B">B1 Router-Link</router-link></li>
</ul>
</div>
// 保存所有路由組件
<keep-alive>
<router-view></router-view>
</keep-alive>
// 保存include指定的組件，可保存多個(gè)
<keep-alive :include="['A', 'B']">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name : 'App'
}
</script>
文章來源地址http://www.zghlxwxcb.cn/news/detail-741479.html
文章來源：http://www.zghlxwxcb.cn/news/detail-741479.html
到了這里，關(guān)于Vue路由組件的緩存keep-alive和include屬性的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
