溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文基于 Vue2.0
keep-alive 簡介
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
用法也很簡單：
<keep-alive> <component> <!-- 該組件將被緩存！ --> </component> </keep-alive>
props
// 組件 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 里面某個組件被緩存，怎么辦？
使用 include/exclude
// 組件 a
export default {
name: 'a',
data () {
return {}
}
}
<keep-alive include="a">
<router-view>
<!-- 只有路徑匹配到的視圖 a 組件會被緩存！ -->
</router-view>
</keep-alive>
exclude 例子類似。
缺點：需要知道組件的 name，項目復雜的時候不是很好的選擇
增加 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 路由里面設置 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 并不能有效的緩存了= =
參考
issues#811
vue#keep-alive
vue2.0 keep-alive最佳實踐
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
