詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive）
更新時間：2018年10月12日 09:45:30 作者：前端攻城小牛
在使用服務(wù)器端渲染時，除了服務(wù)端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。這篇文章主要介紹了詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下
在使用服務(wù)器端渲染時，除了服務(wù)端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。
這時候我們就會想到vue的keep-alive，接下來我們說一下keep-alive的使用
假如現(xiàn)在我們有兩個頁面，home.vue 和 about.vue
home.vue
<template>
<div>
home
</div>
</template>
<script>
export default {
name: Home,
created() {
console.log('home)
}
}
</script>
about.vue
<template>
<div>
about
</div>
</template>
<script>
export default {
name: About,
created() {
console.log('home)
}
}
</script>
app.vue中我們使用keep-alive緩存
<template>
<div id="app">
<keep-alive include="Home">
<router-view class="view">
</router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
這時候運行我們會發(fā)現(xiàn)Home頁面就緩存下來了，大功告成
所有的問題都是我在日常生活中用到的，可能會有不正確或者不是最佳解決方案，希望留下你的建議和意見，共同學(xué)習(xí)，共同進步。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Element Plus實現(xiàn)自定義日期選擇器
這篇文章主要為大家詳細介紹了如何基于Vue和Element Plus提供的現(xiàn)有組件,設(shè)計并實現(xiàn)了一個自定義的日期選擇器組件,感興趣的小伙伴可以參考一下2024-12-12
這篇文章主要介紹了Vue+TypeScript中處理computed方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vite+vue3使用@路徑報錯處理,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決
這篇文章主要介紹了Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了Vue組件化開發(fā)之通用型彈出框的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
今天小編就為大家分享一篇vue prop屬性傳值與傳引用示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue安裝Element?Plus全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細代碼,本文通過實例代碼介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
vue結(jié)合el-table實現(xiàn)表格行拖拽排序(基于sortablejs)
這篇文章主要介紹了vue結(jié)合el-table實現(xiàn)表格行拖拽排序(基于sortablejs),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01