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

Posted on by

1.問題描述

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

2.原因分析

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

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及父節點，隻保留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多級路由緩存內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：