最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue中keep-alive多級(jí)路由緩存問(wèn)題

 更新時(shí)間:2021年12月31日 11:10:50   作者:宇少_Lxuan  
本文主要介紹了vue中keep-alive多級(jí)路由緩存問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

1.問(wèn)題描述

對(duì)賬中心當(dāng)便捷導(dǎo)航菜單最后兩個(gè)是同一模塊且是三級(jí)及以上菜單時(shí),正常切換兩個(gè)便捷頁(yè)簽時(shí)是可以正常緩存的,但刪除最后一個(gè)頁(yè)簽時(shí),此時(shí)另一個(gè)頁(yè)簽頁(yè)面此時(shí)已經(jīng)不緩存了。

2.原因分析

keep-alive默認(rèn)支持緩存是兩級(jí),對(duì)三級(jí)及以上層級(jí)的頁(yè)面緩存失效,之前的處理方式為: 監(jiān)聽(tīng)到路由變化后,將當(dāng)前的路由的標(biāo)識(shí)及父級(jí)標(biāo)識(shí)一起存起來(lái),當(dāng)多個(gè)頁(yè)面存在時(shí),關(guān)閉其中一個(gè)頁(yè)面,也會(huì)將本身及父級(jí)的標(biāo)識(shí)一起刪掉,此時(shí)數(shù)組中已無(wú)父級(jí)標(biāo)識(shí),其他同級(jí)頁(yè)面的緩存將失效。

3.解決思路

將路由配置表的所有路由拆成兩個(gè)操作,一是保持原樣用于菜單的展示,二是對(duì)路由配置表進(jìn)行扁平化處理,將所有的路由處理成二級(jí)路由,這樣keep-alive就能默認(rèn)支持緩存了。

4.處理過(guò)程

拿到完整的路由配置

const modules = []
files.keys().forEach(key => {
    const filesObj = files(key).default || files(key)
    Object.keys(filesObj).forEach(keyOne => {
        modules.push(filesObj[keyOne])
    })
})

操作完成路由配置

export const menuList = modules;  // 用于菜單展示
?
const routerList = formatTwoStageRoutes(formatFlatteningRoutes(modules)); // 將路由扁平化為二級(jí)路由
?
const router = new VueRouter({
    scrollBehavior: () => ({ y: 0 }),
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routerList, // 在路由配置項(xiàng)中使用扁平化處理后的路由
})

扁平化方法

export const formatFlatteningRoutes =(routesList => {
  if (routesList.length <= 0) return routesList;
  let list = [];
  routesList.forEach(v => {
    if(v.path === '/') {
      // 用于添加初試layout和首頁(yè),其他各中心配置過(guò)濾掉layout及父節(jié)點(diǎn),只保留children內(nèi)路由
      list.push(v);
      list = list.concat(formatFlatteningRoutes(v.children))
    } else if (v.children && v.children.length > 0) {
      list = list.concat(formatFlatteningRoutes(v.children))
    } else {
      list.push(v);
    }
  })
  return list;
})
?
export const formatTwoStageRoutes = list => {
  if (list.length <= 0) return list;
  const routerList = [];
  list.forEach(v => {
    if (v.path === '/') {
      routerList.push({
        component: v.component,
        name: v.name,
        path: v.path,
        redirect: v.redirect,
        meta: v.meta,
        children: []
      })
    } else if (v.path === '/login' || v.path === '/showcasePage') {
      // 不需要配置layout的頁(yè)面
      routerList.push(v)
    } else {
      routerList[0].children.push({ ...v })
    }
  })
  return routerList;
}

到此這篇關(guān)于vue中keep-alive多級(jí)路由緩存問(wèn)題的文章就介紹到這了,更多相關(guān)vue keep-alive多級(jí)路由緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue中如何覆蓋style中的樣式

    vue中如何覆蓋style中的樣式

    在Vue組件中覆蓋樣式,可以使用更高優(yōu)先級(jí)的選擇器、!important或深度選擇器(如::v-deep)來(lái)實(shí)現(xiàn),選擇合適的方法取決于具體需求
    2025-01-01
  • vue實(shí)現(xiàn)吸壁懸浮球

    vue實(shí)現(xiàn)吸壁懸浮球

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)吸壁懸浮球,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 拿來(lái)即用的vue旋轉(zhuǎn)木馬組件demo

    拿來(lái)即用的vue旋轉(zhuǎn)木馬組件demo

    這篇文章主要為大家介紹了拿來(lái)即用的vue旋轉(zhuǎn)木馬組件demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • Vue實(shí)現(xiàn)簡(jiǎn)易記事本功能

    Vue實(shí)現(xiàn)簡(jiǎn)易記事本功能

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易記事本功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證

    vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點(diǎn)

    vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點(diǎn)

    這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點(diǎn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說(shuō)明

    vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說(shuō)明

    這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別

    vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別

    這篇文章主要介紹了vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-10-10
  • Vue2源碼解析之自定義指令

    Vue2源碼解析之自定義指令

    自定義指令,其實(shí)就是在vue提供的鉤子中寫(xiě)代碼,這篇文章將從源碼的角度,帶大家深入了解一下Vue2種自定義指令的實(shí)現(xiàn)與使用,需要的可以參考一下
    2023-05-05
  • vue.js—定義全局變量、函數(shù)的方式

    vue.js—定義全局變量、函數(shù)的方式

    這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評(píng)論

花莲县| 新建县| 浦北县| 呼和浩特市| 金寨县| 永州市| 西平县| 蒙城县| 兴安盟| 博湖县| 普兰店市| 黄冈市| 四平市| 宁德市| 德安县| 沙洋县| 伊宁市| 江西省| 特克斯县| 舒城县| 西充县| 阿拉尔市| 彭泽县| 南溪县| 林周县| 德昌县| 长春市| 和顺县| 永和县| 岗巴县| 云阳县| 大同县| 巍山| 扶沟县| 洛川县| 紫金县| 攀枝花市| 濉溪县| 琼结县| 山西省| 怀宁县|