資訊專欄INFORMATION COLUMN
摘要：造成這個問題的原因是多級路由組件嵌套。當點擊菜單的時候，由于設(shè)置的不緩存，所以導(dǎo)致組件被銷毀這就是為什么會失效的根本原因。既然這樣的話，顯示的菜單保留多級的，實際的弄成一級，將顯示菜單和業(yè)務(wù)分離開。
一般的后臺管理系統(tǒng)功能都比較繁多，存在有多級菜單的需求，但是在這種項目里往往keep-alive的表現(xiàn)卻非常不穩(wěn)定，有時候某個頁面可以緩存，但是點幾下就發(fā)現(xiàn)緩存丟了；有時候不知道怎么回事又死活不緩存了。
造成這個問題的原因是： 多級路由組件嵌套。
具體分析： 假如一個后臺管理系統(tǒng)，有一個main.vue是所有頁面的框架， 里面有這樣一段代碼
然后建立了一個父級菜單，頁面是ChildView.vue， 里面的代碼如下
假設(shè)這個父菜單里有兩個子菜單，分別為 A和B， 然后A設(shè)置為緩存(keepAlive=true), B不緩存(keepAlive=false);
當點擊A菜單的時候，系統(tǒng)緩存了ChildView.vue組件。
當點擊B菜單的時候，由于B設(shè)置的不緩存，所以導(dǎo)致ChildView.vue組件被銷毀
這就是keep-alive為什么會失效的根本原因。
還有更復(fù)雜的，比如同一個菜單里的子菜單可以緩存，但是點擊另外一個父菜單或者父菜單下的子菜單卻不緩存， 究其原理和上面的分析是一樣的原因，就是多級菜單，多個共用組件導(dǎo)致的keepAlive緩存失效， keepAlive根本沒考慮到頁面緩存的復(fù)雜性。
以下幾種表現(xiàn)也是這個問題造成的原因之一：
activated和deactivated不觸發(fā)
從A頁面進入B頁面發(fā)現(xiàn)的時候發(fā)現(xiàn)A頁面的接口又會被重復(fù)觸發(fā)調(diào)用
分析問題：
既然是多個router-view嵌套并且共用的情況下造成的，那么如果只存在一個router-view，也就是只需要main.vue作為框架內(nèi)所有頁面的容器，就不會有這個問題。
實際上是不是多級菜單對于項目或者業(yè)務(wù)上來講一點都不影響，只是界面顯示上需要，讓用戶能更快點擊到自己需要的功能頁面而已。 既然這樣的話，顯示的菜單保留多級的，實際的router弄成一級， 將顯示菜單和業(yè)務(wù)router分離開。
解決問題：
首先將配置好的多級router用vuex緩存起來，用作展示的菜單。
然后將router轉(zhuǎn)換一下，轉(zhuǎn)換成一級菜單，用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);
然后面包屑導(dǎo)航要調(diào)整一下，大部分邏輯都是從route.matched里面獲取的，但是現(xiàn)在router全是一級的，我們要從展示的菜單數(shù)據(jù)里面拿面包屑導(dǎo)航數(shù)據(jù)。
示例代碼：
/**
* 自定義查找字段, 根據(jù)最后一級某個字段查找完整樹(整個父類)
* @param {*} val 要查找對比的值
* @param {*} data 要查找的數(shù)據(jù)
* @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緩存
})
搞完，收工!
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106415.html
摘要：實現(xiàn)動態(tài)緩存以及緩存銷毀需求來源及描述后臺管理系統(tǒng)中，左側(cè)為功能菜單欄，點擊菜單列表，右側(cè)顯示該菜單的功能頁面，本來是一個非常簡單的后臺管理系統(tǒng)布局，現(xiàn)在增加了菜單按鈕點擊左側(cè)菜單欄時，右側(cè)頁面頭部顯示當前的頁面標題，形成一個列表，點擊可 vue keep-alive實現(xiàn)動態(tài)緩存以及緩存銷毀 需求來源及描述 后臺管理系統(tǒng)中，左側(cè)為功能菜單欄，點擊菜單列表，右側(cè)顯示該菜單的功能頁面，本來...
摘要：問題由來最近用做前端項目，從查詢頁面進入詳情頁時，返回頁面需要保留上次的查詢條件，表格當前頁數(shù)。從其他菜單進去，不需要緩存，要保持頁面的初始狀態(tài)。當進入詳情頁，需要對該條數(shù)據(jù)進行修改時，修改成功后返回，應(yīng)該更新列表。 問題由來 1、最近用vue做前端項目，從查詢頁面進入詳情頁時，返回頁面需要保留上次的查詢條件，表格當前頁數(shù)。2、從其他菜單進去，不需要緩存，要保持頁面的初始狀態(tài)?；谏厦?..
摘要：具體實現(xiàn)請查看和的退出登陸回調(diào)方法。現(xiàn)在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據(jù)后臺數(shù)據(jù)來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。 項目地址 vue-admin-template 在線預(yù)覽 更新 2019.6.25 更新 修復(fù)路由表沖突問題 退出當前用戶，換賬號重新登陸時，上個賬號和現(xiàn)在的賬號路由表會有...
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認證機制，來實現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看 這個分支版本是一兩年前...
摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。服務(wù)端技術(shù)棧登錄授權(quán)用認證機制，來實現(xiàn)登錄登出。服務(wù)器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。 一、前言提綱 基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。 二、歷史版本 基于Vue-CLI2.0:點我查看這個分支版本是一兩...
閱讀 2646·2021-11-23 09:51
閱讀 914·2021-09-24 10:37
閱讀 3632·2021-09-02 15:15
閱讀 1973·2019-08-30 13:03
閱讀 1894·2019-08-29 15:41
閱讀 2640·2019-08-29 14:12
閱讀 1437·2019-08-29 11:19
閱讀 3313·2019-08-26 13:39
