keep-alive不能緩存多層級路由菜單問題解決
這出現(xiàn)的原因是多級路由導致的,就是router-view嵌套 在層級不同的router-view中切換tag會出現(xiàn)緩存數(shù)據(jù)失效的問題。目前keep-alive可以有效緩存一級,二級的路由菜單,3級以上菜單并不能做到緩存,這里提供一個解決方案:
在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
}
空模板的代碼如下:
<template>
<div>
<app-main/>
</div>
</template>
<script>
import { AppMain} from './components'
export default {
name:'EmptyTemplate',
components:{AppMain}
}
</script>
tagsViewd.js關鍵代碼,在cachedViews中加入空模板的name
const state = {
visitedViews: [],
cachedViews: ['EmptyTemplate']
}
到此這篇關于keep-alive不能緩存多層級路由菜單問題解決的文章就介紹到這了,更多相關keep-alive不能多層緩存內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- vue里如何主動銷毀keep-alive緩存的組件
- vue 使某個組件不被 keep-alive 緩存的方法
- vuex + keep-alive實現(xiàn)tab標簽頁面緩存功能
- vue使用keep-alive實現(xiàn)數(shù)據(jù)緩存不刷新
- vue中keep-alive,include的緩存問題
- vue項目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
- 詳解keep-alive + vuex 讓緩存的頁面靈活起來
- vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置
- 深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
- vue使用keep-alive后清除緩存的方法
相關文章
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue利用axios發(fā)送請求并代理請求的實現(xiàn)代碼
在Web開發(fā)中,跨域問題是一個常見難題,通常由瀏覽器的同源策略引起,通過簡單配置vue.config.js文件,以及安裝axios依賴,即可實現(xiàn)前后端的無縫連接和數(shù)據(jù)交換,這種方法簡便有效,對于處理跨域請求問題非常實用2024-10-10
在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件,支持任務編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下2023-03-03

