這出現(xiàn)的原因是多級路由導致的，就是router-view嵌套 在層級不同的router-view中切換tag會出現(xiàn)緩存數(shù)據(jù)失效的問題。目前keep-alive可以有效緩存一級，二級的路由菜單，3級以上菜單并不能做到緩存，這里提供一個解決方案：
十載的安徽網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整安徽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“安徽網(wǎng)站設(shè)計”,“安徽網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
在cachedViews中手動加上一級菜單和三級菜單之間，缺失的二級菜單的名字，這樣二級菜單下的組件就會緩存了
實列代碼如下：
重慶分公司
重慶分公司
const _import = require('@/router/_import_prodection');//獲取組件的方法
import {tree} from '@/utils/treeDate'
import Layout from '@/views/layout'
import EmptyTemplate from '@/views/layout/EmptyTemplate'
export function filterAsyncRouter(routerlist) {
const routerlists=tree(routerlist )
//獲取路由信息
function getRouter(routerlists){
routerlists.forEach(e => {
// 刪除無用屬性
delete e.catalogCode
delete e.catalogOrder
delete e.endpoints
delete e.fullOrder
// delete e.permName
// delete e.id
// delete e.parentId
e.name=e.catalogName
if (e.parentId === 0||e.children) {//Layout組件特殊處理
//路徑為空時會因為undefind報錯，給個默認值來解決
e.path = e.url||'nopath'
if(e.url.split('/').length>2){
//處理多層級路的時候給了一個空模板
e.component = EmptyTemplate
}else{
e.component = Layout
}
e.icon='setting-fill'
} else {
e.icon='circle'
e.component = _import(e.url)
//路徑為空時會因為undefind報錯，給個默認值來解決
e.path = e.url.split('/')[2]||'nopath'
}
// delete e.parentId
delete e.url
// if (e.redirect === '') {
// delete e.redirect
// }
if (e.icon !== '' && e.title !== '') { // 配置 菜單標題 與 圖標
e.meta = {
// title: e.catalogName 中文名稱
// catalogEngName 英文名稱
title: e.catalogEngName,
titleZh:e.catalogName,
icon: e.icon
}
}
delete e.catalogName
delete e.icon
delete e.title
// delete e.name//由于名字的存在導致named 錯誤 刪掉
if (e.children != null) {
// 存在子路由就遞歸
getRouter(e.children)
}
})
return routerlists
}
const getRouters=getRouter(routerlists)
// return asyncRouterMap
return getRouters
}空模板的代碼如下：
tagsViewd.js關(guān)鍵代碼，在cachedViews中加入空模板的name
const state = {
visitedViews: [],
cachedViews: ['EmptyTemplate']
}到此這篇關(guān)于keep-alive不能緩存多層級路由菜單問題解決的文章就介紹到這了,更多相關(guān)keep-alive不能多層緩存內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！
