vue多級菜單(路由)導致緩存(keep-alive)失效

big_cat 發布于2019-08-26 10:35 / 2572人閱讀

摘要：造成這個問題的原因是多級路由組件嵌套。當點擊菜單的時候，由于設置的不緩存，所以導致組件被銷毀這就是為什么會失效的根本原因。既然這樣的話，顯示的菜單保留多級的，實際的弄成一級，將顯示菜單和業務分離開。

一般的后臺管理系統功能都比較繁多，存在有多級菜單的需求，但是在這種項目里往往keep-alive的表現卻非常不穩定，有時候某個頁面可以緩存，但是點幾下就發現緩存丟了；有時候不知道怎么回事又死活不緩存了。

造成這個問題的原因是：多級路由組件嵌套。
具體分析：假如一個后臺管理系統，有一個main.vue是所有頁面的框架，里面有這樣一段代碼

然后建立了一個父級菜單，頁面是ChildView.vue，里面的代碼如下

假設這個父菜單里有兩個子菜單，分別為 A和B，然后A設置為緩存(keepAlive=true), B不緩存(keepAlive=false);
當點擊A菜單的時候，系統緩存了ChildView.vue組件。
當點擊B菜單的時候，由于B設置的不緩存，所以導致ChildView.vue組件被銷毀
這就是keep-alive為什么會失效的根本原因。

還有更復雜的，比如同一個菜單里的子菜單可以緩存，但是點擊另外一個父菜單或者父菜單下的子菜單卻不緩存，究其原理和上面的分析是一樣的原因，就是多級菜單，多個共用組件導致的keepAlive緩存失效， keepAlive根本沒考慮到頁面緩存的復雜性。

以下幾種表現也是這個問題造成的原因之一：

activated和deactivated不觸發

從A頁面進入B頁面發現的時候發現A頁面的接口又會被重復觸發調用

分析問題：
既然是多個router-view嵌套并且共用的情況下造成的，那么如果只存在一個router-view，也就是只需要main.vue作為框架內所有頁面的容器，就不會有這個問題。

實際上是不是多級菜單對于項目或者業務上來講一點都不影響，只是界面顯示上需要，讓用戶能更快點擊到自己需要的功能頁面而已。既然這樣的話，顯示的菜單保留多級的，實際的router弄成一級，將顯示菜單和業務router分離開。

解決問題：
首先將配置好的多級router用vuex緩存起來，用作展示的菜單。
然后將router轉換一下，轉換成一級菜單，用addRoutes異步添加到router里面。

局部示例代碼：

const formatRouter = (routes, newRoutes = []) => {
  routes.map(item => {
    if (item.children && item.children.length > 0) formatRouter(item.children, newRoutes);
    newRoutes.push(item);
  })
  return newRoutes;
}
let flatRoutes = formatRouter(routes);
router.addRoutes(flatRoutes);

然后面包屑導航要調整一下，大部分邏輯都是從route.matched里面獲取的，但是現在router全是一級的，我們要從展示的菜單數據里面拿面包屑導航數據。

示例代碼：

/**
 * 自定義查找字段, 根據最后一級某個字段查找完整樹(整個父類)
 * @param {*} val     要查找對比的值
 * @param {*} data    要查找的數據
 * @param {*} fKey    要查找對比的字段
 */ 
const recursiveTreeByLastLevel = (val, data, fKey = "value") => {
  let rData = [];
  for (let i = 0, len = data.length; i < len; i++) {
    rData.push(data[i]);
    if (data[i].children && data[i].children.length > 0) {
      rData = rData.concat(recursiveTreeByLastLevel(val, data[i].children, fKey));
      if (rData.some(item => item[fKey] === val)) return rData;
    }
    if (data[i][fKey] === val) return rData;
    rData = [];
  }
  return rData;
}
 
router.afterEach((to, from, next) => {
  var routerList = recursiveTreeByLastLevel(to.name, store.state.sidebarMenu, "name")
  store.commit("setCrumbList", routerList) // 通過vuex緩存
})

搞完，收工!

云服務器 GPU云服務器導致定時器失效多級關聯菜單多級網頁菜單多級下拉菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106415.html

vue keep-alive實現動態緩存以及緩存銷毀

摘要：實現動態緩存以及緩存銷毀需求來源及描述后臺管理系統中，左側為功能菜單欄，點擊菜單列表，右側顯示該菜單的功能頁面，本來是一個非常簡單的后臺管理系統布局，現在增加了菜單按鈕點擊左側菜單欄時，右側頁面頭部顯示當前的頁面標題，形成一個列表，點擊可 vue keep-alive實現動態緩存以及緩存銷毀需求來源及描述后臺管理系統中，左側為功能菜單欄，點擊菜單列表，右側顯示該菜單的功能頁面，本來...

littleGrow 2019-08-26 10:10 評論0 收藏0
vue項目中keep-alive緩存，從詳情頁返回列表時保存上一步的信息

摘要：問題由來最近用做前端項目，從查詢頁面進入詳情頁時，返回頁面需要保留上次的查詢條件，表格當前頁數。從其他菜單進去，不需要緩存，要保持頁面的初始狀態。當進入詳情頁，需要對該條數據進行修改時，修改成功后返回，應該更新列表。問題由來 1、最近用vue做前端項目，從查詢頁面進入詳情頁時，返回頁面需要保留上次的查詢條件，表格當前頁數。2、從其他菜單進去，不需要緩存，要保持頁面的初始狀態。基于上面...

justjavac 2019-08-23 14:10 評論0 收藏0
vue輕量級后臺管理系統基礎模板

摘要：具體實現請查看和的退出登陸回調方法。現在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據后臺數據來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。項目地址 vue-admin-template 在線預覽更新 2019.6.25 更新修復路由表沖突問題退出當前用戶，換賬號重新登陸時，上個賬號和現在的賬號路由表會有...

2shou 2019-08-23 14:17 評論0 收藏0
Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩年前...

Richard_Gao 2019-05-22 18:23 評論0 收藏0
Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩...

luzhuqun 2019-08-26 13:50 評論0 收藏0