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

vue中keep-alive多級路由緩存問題

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

1.問題描述

對賬中心當便捷導航菜單最后兩個是同一模塊且是三級及以上菜單時,正常切換兩個便捷頁簽時是可以正常緩存的,但刪除最后一個頁簽時,此時另一個頁簽頁面此時已經不緩存了。

2.原因分析

keep-alive默認支持緩存是兩級,對三級及以上層級的頁面緩存失效,之前的處理方式為: 監(jiān)聽到路由變化后,將當前的路由的標識及父級標識一起存起來,當多個頁面存在時,關閉其中一個頁面,也會將本身及父級的標識一起刪掉,此時數組中已無父級標識,其他同級頁面的緩存將失效。

3.解決思路

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

4.處理過程

拿到完整的路由配置

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)); // 將路由扁平化為二級路由
?
const router = new VueRouter({
    scrollBehavior: () => ({ y: 0 }),
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routerList, // 在路由配置項中使用扁平化處理后的路由
})

扁平化方法

export const formatFlatteningRoutes =(routesList => {
  if (routesList.length <= 0) return routesList;
  let list = [];
  routesList.forEach(v => {
    if(v.path === '/') {
      // 用于添加初試layout和首頁,其他各中心配置過濾掉layout及父節(jié)點,只保留children內路由
      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的頁面
      routerList.push(v)
    } else {
      routerList[0].children.push({ ...v })
    }
  })
  return routerList;
}

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

相關文章

  • vue 使某個組件不被 keep-alive 緩存的方法

    vue 使某個組件不被 keep-alive 緩存的方法

    今天小編就為大家分享一篇vue 使某個組件不被 keep-alive 緩存的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue3中的組件數據懶加載

    Vue3中的組件數據懶加載

    這篇文章主要介紹了Vue3中的組件數據懶加載問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue.js中NaiveUI組件文字漸變的實現

    Vue.js中NaiveUI組件文字漸變的實現

    這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實現,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-07-07
  • Vue3中實現歌詞滾動顯示效果

    Vue3中實現歌詞滾動顯示效果

    本文分享如何在Vue 3中實現一個簡單的歌詞滾動效果,我將從歌詞數據的處理開始,一步步介紹布局的搭建和事件的實現,感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • 使用vue構建移動應用實戰(zhàn)代碼

    使用vue構建移動應用實戰(zhàn)代碼

    本篇文章主要介紹了使用vue構建移動應用實戰(zhàn)代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vant?Weapp組件picker選擇器初始默認選中問題

    Vant?Weapp組件picker選擇器初始默認選中問題

    這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認選中問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue安裝遇到的5個報錯及解決方法

    vue安裝遇到的5個報錯及解決方法

    在本篇文章里小編給大家分享了關于vue安裝遇到的5個報錯小結以及解決方法,需要的朋友們參考下。
    2019-06-06
  • VUE實現密碼驗證與提示功能

    VUE實現密碼驗證與提示功能

    這篇文章主要為大家詳細介紹了VUE實現密碼驗證與提示功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • Vue3響應式對象是如何實現的(1)

    Vue3響應式對象是如何實現的(1)

    這篇文章主要介紹了Vue3響應式對象是如何實現的,文章圍繞主題展開詳細的內容介紹具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • Vue中mintui的field實現blur和focus事件的方法

    Vue中mintui的field實現blur和focus事件的方法

    今天小編就為大家分享一篇Vue中mintui的field實現blur和focus事件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評論