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)銷毀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中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Vue利用axios發(fā)送請(qǐng)求并代理請(qǐng)求的實(shí)現(xiàn)代碼
在Web開(kāi)發(fā)中,跨域問(wèn)題是一個(gè)常見(jiàn)難題,通常由瀏覽器的同源策略引起,通過(guò)簡(jiǎn)單配置vue.config.js文件,以及安裝axios依賴,即可實(shí)現(xiàn)前后端的無(wú)縫連接和數(shù)據(jù)交換,這種方法簡(jiǎn)便有效,對(duì)于處理跨域請(qǐng)求問(wèn)題非常實(shí)用2024-10-10vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法
下面小編就為大家分享一篇vue頁(yè)面跳轉(zhuǎn)后返回原頁(yè)面初始位置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總,需要的朋友可以參考下2023-03-03vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法
今天小編就為大家分享一篇vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09