keep-alive不能緩存多層級(jí)路由菜單問(wèn)題解決
這出現(xiàn)的原因是多級(jí)路由導(dǎo)致的,就是router-view嵌套 在層級(jí)不同的router-view中切換tag會(huì)出現(xiàn)緩存數(shù)據(jù)失效的問(wèn)題。目前keep-alive可以有效緩存一級(jí),二級(jí)的路由菜單,3級(jí)以上菜單并不能做到緩存,這里提供一個(gè)解決方案:
在cachedViews中手動(dòng)加上一級(jí)菜單和三級(jí)菜單之間,缺失的二級(jí)菜單的名字,這樣二級(jí)菜單下的組件就會(huì)緩存了
實(shí)列代碼如下:

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 => {
// 刪除無(wú)用屬性
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組件特殊處理
//路徑為空時(shí)會(huì)因?yàn)閡ndefind報(bào)錯(cuò),給個(gè)默認(rèn)值來(lái)解決
e.path = e.url||'nopath'
if(e.url.split('/').length>2){
//處理多層級(jí)路的時(shí)候給了一個(gè)空模板
e.component = EmptyTemplate
}else{
e.component = Layout
}
e.icon='setting-fill'
} else {
e.icon='circle'
e.component = _import(e.url)
//路徑為空時(shí)會(huì)因?yàn)閡ndefind報(bào)錯(cuò),給個(gè)默認(rèn)值來(lái)解決
e.path = e.url.split('/')[2]||'nopath'
}
// delete e.parentId
delete e.url
// if (e.redirect === '') {
// delete e.redirect
// }
if (e.icon !== '' && e.title !== '') { // 配置 菜單標(biāo)題 與 圖標(biāo)
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//由于名字的存在導(dǎo)致named 錯(cuò)誤 刪掉
if (e.children != null) {
// 存在子路由就遞歸
getRouter(e.children)
}
})
return routerlists
}
const getRouters=getRouter(routerlists)
// return asyncRouterMap
return getRouters
}
空模板的代碼如下:
<template>
<div>
<app-main/>
</div>
</template>
<script>
import { AppMain} from './components'
export default {
name:'EmptyTemplate',
components:{AppMain}
}
</script>
tagsViewd.js關(guān)鍵代碼,在cachedViews中加入空模板的name
const state = {
visitedViews: [],
cachedViews: ['EmptyTemplate']
}
到此這篇關(guān)于keep-alive不能緩存多層級(jí)路由菜單問(wèn)題解決的文章就介紹到這了,更多相關(guān)keep-alive不能多層緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue里如何主動(dòng)銷(xiāo)毀keep-alive緩存的組件
- vue 使某個(gè)組件不被 keep-alive 緩存的方法
- vuex + keep-alive實(shí)現(xiàn)tab標(biāo)簽頁(yè)面緩存功能
- vue使用keep-alive實(shí)現(xiàn)數(shù)據(jù)緩存不刷新
- vue中keep-alive,include的緩存問(wèn)題
- vue項(xiàng)目?jī)?yōu)化之通過(guò)keep-alive數(shù)據(jù)緩存的方法
- 詳解keep-alive + vuex 讓緩存的頁(yè)面靈活起來(lái)
- vue keep-alive列表頁(yè)緩存 詳情頁(yè)返回上一頁(yè)不刷新,定位到之前位置
- 深入理解與使用keep-alive(配合router-view緩存整個(gè)路由頁(yè)面)
- vue使用keep-alive后清除緩存的方法
相關(guān)文章
vue 中 get / delete 傳遞數(shù)組參數(shù)方法
這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-05-05
vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?axios庫(kù)發(fā)送請(qǐng)求的示例介紹
axios是基于promise的HTTP庫(kù),可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios,?axios),本文給大家介紹Vue?axios和vue-axios關(guān)系,感興趣的朋友一起看看吧2022-08-08
使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類(lèi)型,它在顯示進(jìn)度、完成率或其他類(lèi)似度量時(shí)非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06

