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

本篇內(nèi)容介紹了“vue中keep-alive多級(jí)路由緩存問(wèn)題怎么處理”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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;
}

“vue中keep-alive多級(jí)路由緩存問(wèn)題怎么處理”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！