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

vue路由緩存的幾種實(shí)現(xiàn)方式小結(jié)

 更新時(shí)間：2020年02月02日 09:55:52   作者：不想寫代碼的碼農(nóng)  
這篇文章主要介紹了vue路由緩存的幾種實(shí)現(xiàn)方式,結(jié)合實(shí)例形式詳細(xì)分析了vue.js路由緩存常見實(shí)現(xiàn)方式、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了vue路由緩存的幾種實(shí)現(xiàn)方式。分享給大家供大家參考，具體如下：

在我們的日常開發(fā)中，有時(shí)候會(huì)遇到頁面的緩存，特別是電商的項(xiàng)目，在商品列表的一些狀態(tài)都是要緩存下來的。

下面就簡單介紹幾種 vue 路由緩存的幾種方式。

1、全部緩存

<keep-alive>
  <router-view></router-view>
</keep-alive>

直接用 keep-alive 標(biāo)簽包裹 router-view 標(biāo)簽就能緩存全部的頁面了

2、緩存單個(gè)指定路由

<keep-alive include="該路由的name名稱">
  <router-view></router-view>
</keep-alive>

同樣直接用 keep-alive 標(biāo)簽包裹 router-view 標(biāo)簽，然后使用 include 指定需要緩存的頁面的 name 名稱

可以使用 v-bind 綁定一個(gè) name 數(shù)組，也可用 '，' 隔開，也可使用正則表達(dá)式，多個(gè)的情況建議使用第三種

注意：是緩存頁面的 name 名稱，而不是緩存頁面路由的 name 名稱

3、緩存多個(gè)指定路由

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

使用兩個(gè) router-view 標(biāo)簽分別作為緩存和不緩存的路由出口，在路由配置的時(shí)候，只需要給要緩存的頁面加上 meta 屬性，然后添加 keepAlive 屬性設(shè)置為 true 即可。例如：

{
 path:'/test',
 name:'Test',
 component: Test,
 meta: {keepAlive: true} //true緩存 false不緩存
}

四、activated和deactivated

activated，deactivated 這兩個(gè)生命周期函數(shù)一定是要在使用了 keep-alive 組件后才會(huì)有的，否則則不存在。

當(dāng)引入 keep-alive 的時(shí)候，頁面第一次進(jìn)入

鉤子的觸發(fā)順序 created-> mounted -> activated，退出時(shí)觸發(fā)deactivated。

當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā) activated

注意：keep-alive里面緊跟包裹 router-view 組件，而不能出現(xiàn)其他標(biāo)簽，不然會(huì)導(dǎo)致無法緩存頁面。

如果需要在路由不變的情況下，無白屏刷新頁面，請參照前文：vue.js路由不變，無白屏刷新頁面

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • vue 1.0 結(jié)合animate.css定義動(dòng)畫效果

    vue 1.0 結(jié)合animate.css定義動(dòng)畫效果

    本文分步驟給大家介紹了Vue 1.0自定義動(dòng)畫效果，vue1.0代碼結(jié)合animate.css定義動(dòng)畫，頁面一定要引入animate.cdd，具體實(shí)例代碼大家參考下本文
    2018-07-07
  • Vue接入高德地圖的完整實(shí)例

    Vue接入高德地圖的完整實(shí)例

    近期在用vue做一個(gè)環(huán)保類的項(xiàng)目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • 使用vue.js?為基礎(chǔ)的仿QQ聊天室

    使用vue.js?為基礎(chǔ)的仿QQ聊天室

    這篇文章主要為大家介紹了基于vue.js的QQ聊天室，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2021-12-12
  • ElementUI如何修改Dialog的標(biāo)題樣式

    ElementUI如何修改Dialog的標(biāo)題樣式

    這篇文章主要介紹了ElementUI如何修改Dialog的標(biāo)題樣式問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue前端開發(fā)keepAlive使用詳解

    vue前端開發(fā)keepAlive使用詳解

    在開發(fā)中經(jīng)常有從列表跳到詳情頁，然后返回詳情頁的時(shí)候需要緩存列表頁的狀態(tài)（比如滾動(dòng)位置信息），這個(gè)時(shí)候就需要保存狀態(tài)，要緩存狀態(tài)
    2021-10-10
  • Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式

    Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式

    這篇文章主要介紹了Vue配合Vant使用時(shí)area省市區(qū)選擇器的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決

    vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決

    這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue-i18n的9以上版本中@被用作特殊字符處理,直接用會(huì)報(bào)錯(cuò)問題

    vue-i18n的9以上版本中@被用作特殊字符處理,直接用會(huì)報(bào)錯(cuò)問題

    這篇文章主要介紹了vue-i18n的9以上版本中@被用作特殊字符處理,直接用會(huì)報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • vue小白入門教程

    vue小白入門教程

    vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，本文通過實(shí)例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2018-04-04
  • vue之使用echarts圖表setOption多次很卡問題及解決

    vue之使用echarts圖表setOption多次很卡問題及解決

    這篇文章主要介紹了vue之使用echarts圖表setOption多次很卡問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-07-07

最新評論