Vue路由組件的緩存keep-alive和include屬性的具體使用

更新時(shí)間：2023年11月02日 09:16:06 作者：南瓜骨頭

：瀏覽器頁(yè)面在進(jìn)行切換時(shí),原有的路由組件會(huì)被銷毀,通過(guò)緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下

功能：瀏覽器頁(yè)面在進(jìn)行切換時(shí)，原有的路由組件會(huì)被銷毀。通過(guò)緩存可以保存被切換的路由組件。

例子：在頁(yè)面上填好的信息當(dāng)進(jìn)行頁(yè)面切換再轉(zhuǎn)回原來(lái)的頁(yè)面時(shí)，原本信息被清空了需要重新填寫(xiě)

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>

到此這篇關(guān)于Vue路由組件的緩存keep-alive和include屬性的具體使用的文章就介紹到這了,更多相關(guān)Vue keep-alive和include屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vant實(shí)現(xiàn)自定義日期時(shí)間選擇器(年月日時(shí)分秒)
使用vant作為UI組件時(shí),需要一個(gè)日期時(shí)間選擇器,vant中有Dateicker和TimePicker,可以將兩個(gè)組件組合封裝使用,下面就來(lái)詳細(xì)的介紹一下
2025-12-12
Vue.js使用帶有對(duì)象的 v-model 來(lái)創(chuàng)建自定義組件的詳細(xì)操作
本文介紹了如何在Vue.js中使用帶有對(duì)象的v-model來(lái)創(chuàng)建自定義組件,通過(guò)創(chuàng)建一個(gè)封裝了多個(gè)輸入字段的自定義組件,并使用計(jì)算屬性和深拷貝來(lái)處理對(duì)象狀態(tài),可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定,感興趣的朋友跟隨小編一起看看吧
2025-12-12
vue2組件實(shí)現(xiàn)懶加載淺析
本篇文章主要介紹了vue2組件實(shí)現(xiàn)懶加載淺析,運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力.
2017-03-03
vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue-router組件未正確注冊(cè)的問(wèn)題及解決
用戶因?qū)雟ue-router名稱與創(chuàng)建實(shí)例不一致導(dǎo)致錯(cuò)誤,后發(fā)現(xiàn)導(dǎo)入的是index.js文件,省略文件名,但問(wèn)題仍未解決,需檢查掛載配置
2025-08-08
vue.js實(shí)現(xiàn)表格合并示例代碼
最近工作中遇到一個(gè)需求，是要做一個(gè)頁(yè)面放張大表格用來(lái)顯示數(shù)據(jù)項(xiàng)，純粹為了view層操作方便，就用了vue做渲染。然而又被提出了一個(gè)需求，需要相鄰的相同值的行數(shù)據(jù)項(xiàng)進(jìn)行單元格合并，這就醉了。沒(méi)辦法，只能想辦法解決，下面通過(guò)這篇文章來(lái)一起看看吧。
2016-11-11
vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁(yè)懶加載
下拉框一開(kāi)始請(qǐng)求第一頁(yè)的內(nèi)容,滾動(dòng)到最后的時(shí)候,請(qǐng)求第二頁(yè)的內(nèi)容,如此反復(fù),直到所有數(shù)據(jù)加載完成,這篇文章主要介紹了vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁(yè)懶加載,需要的朋友可以參考下
2024-07-07
vue的路由映射問(wèn)題及解決方案
這篇文章主要介紹了vue的路由映射問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
為什么在Vue3?setup()中直接解構(gòu)props會(huì)丟失響應(yīng)性詳解
props是響應(yīng)式的,當(dāng)傳入新的prop時(shí),它將被更新,因?yàn)閜rops是響應(yīng)式的,這篇文章主要介紹了為什么在Vue3 setup()中直接解構(gòu)props會(huì)丟失響應(yīng)性的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2026-05-05
Vue3中關(guān)于ref和reactive的問(wèn)題
這篇文章主要介紹了Vue3中關(guān)于ref和reactive的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04