欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年11月02日 09:16:06   作者：南瓜骨頭  
：瀏覽器頁面在進(jìn)行切換時(shí),原有的路由組件會被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下

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

例子：在頁面上填好的信息當(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>

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

相關(guān)文章

  • vue v-on:click傳遞動(dòng)態(tài)參數(shù)的步驟

    vue v-on:click傳遞動(dòng)態(tài)參數(shù)的步驟

    這篇文章主要介紹了vue v-on:click傳遞動(dòng)態(tài)參數(shù)的步驟，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 關(guān)于vue2使用element?UI中Descriptions組件的遍歷問題詳解

    關(guān)于vue2使用element?UI中Descriptions組件的遍歷問題詳解

    最近element-ui遇到了很多坑,下面這篇文章主要給大家介紹了關(guān)于vue2使用element?UI中Descriptions組件的遍歷問題,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • 關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題

    關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題

    這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • Vue項(xiàng)目組件化工程開發(fā)實(shí)踐方案

    Vue項(xiàng)目組件化工程開發(fā)實(shí)踐方案

    這篇文章主要介紹了Vue項(xiàng)目組件化工程開發(fā)實(shí)踐方案,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2018-01-01
  • Vue仿今日頭條實(shí)例詳解

    Vue仿今日頭條實(shí)例詳解

    這篇文章主要介紹了Vue仿今日頭條實(shí)例詳解，并把相關(guān)代碼做了說明，對此有興趣的朋友參考下吧。
    2018-02-02
  • Vue基于localStorage存儲信息代碼實(shí)例

    Vue基于localStorage存儲信息代碼實(shí)例

    這篇文章主要介紹了Vue基于localStorage存儲信息代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • 淺析vue給不同環(huán)境配置不同打包命令

    淺析vue給不同環(huán)境配置不同打包命令

    本文分步驟給大家介紹vue給不同環(huán)境配置不同打包命令的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • vue學(xué)習(xí)記錄之動(dòng)態(tài)組件淺析

    vue學(xué)習(xí)記錄之動(dòng)態(tài)組件淺析

    動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏,這篇文章主要給大家介紹了關(guān)于vue學(xué)習(xí)記錄之動(dòng)態(tài)組件的相關(guān)資料,本文通過示例代碼介紹介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue2路由基本用法實(shí)例分析

    vue2路由基本用法實(shí)例分析

    這篇文章主要介紹了vue2路由基本用法,結(jié)合實(shí)例形式分析了vue2路由基本功能、原理、用法與操作注意事項(xiàng),需要的朋友可以參考下
    2020-03-03
  • JSON數(shù)組和JSON對象在vue中的獲取方法

    JSON數(shù)組和JSON對象在vue中的獲取方法

    這兩天在學(xué)習(xí)vue，主要是為了實(shí)現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個(gè)環(huán)節(jié)，這篇文章主要介紹了JSON數(shù)組和JSON對象在vue中的獲取方法,需要的朋友可以參考下
    2022-09-09

最新評論