基于vue-element-admin框架的多级路由缓存效果1.keep-alive路由缓存原理keep-alive根据路由名称缓存对应的页面组件名属性和include数组一样，cachedViews数组由store维护复制代码2.vue-element-admin中的路由缓存方案是src/layout/component/AppMain文件里有路由，只有一级路由，多级路由是通过创建一个空的路由文件来实现。该方案使用同一个文件实现多级路由，不需要再写一个空的路由文件。原则是keep-alive必须要匹配组件名。复用组件文件的问题是如何动态更改组件名称。组件在路由器中配置。在这里给组件重命名还是挺麻烦的。在尝试了各种方法后，终于实现了动态更改组件名称的效果（没错，就是用重命名的方式~~）。子路由文件demo：importEmptyRoutefrom'@/layout/EmptyRoute'exportdefault{path:'/lab',component:load('layout/index'),redirect:'noRedirect',name:'layout',alwaysShow:true,meta:{title:'Laboratory',},children:[{path:'todo-list',组件:load('views/lab/todo/list/index'),name:'lab-todo-list',meta:{title:'Todo'}},{path:'todo-list-detail/:id',component:load('views/lab/todo/list/detail'),name:'实验室-todo-list-detail',hidden:true,meta:{title:'ViewTodoItems',activeMenu:'/lab/todo-list',}},{path:'common',name:'common',重定向:'noRedirect',//别忘了添加component:{...EmptyRoute,name:'common'},//Sub-routealwaysShow:true,meta:{title:'Generalrequirements'},children:[{路径：'公平'，组件：负载（'views/lab/common/fairness/index'），名称：'lab-common-faironness',meta:{title:'impartiality',}},{path:'privacy',name:'privacy',redirect:'noRedirect',component:{...EmptyRoute,name:'privacy'},//SubroutealwaysShow:true,meta:{title:'Confidentiality'},children:[{path:'agreement',component:load('views/lab/common/privacy/agreement/index'),name:'lab-common-privacy-agreement',meta:{title:'保密协议',}}]}]}]}复制代码路由文件EmptyRoute.vue复制代码库中的tagsView.js，根据visitedViews改造一切：根据数组中匹配的各级路由数组设置各级路由应该是的路由名称cached由被缓存的对象保存，核心方法：setMatched，匹配的对象使用路由的名称作为键值code/*eslint-disableno-shadow*/conststate={isRefresh:false,//是否刷新缓存：{},visitedViews:[],}constmutations={}functionfilterView(view){if(!view)returnviewconst{fullPath,name,path,meta,params,query,matched}=viewreturn{fullPath,name,path,meta,params,query,matched:匹配？匹配.map(i=>({meta:i.meta,name:i.name,path:i.path,})):undefined}}constactions={retsetState({state}){state.visitedViews=[]状态.cached={}},setMatched({dispatch,state}){constobj={}state.visitedViews.forEach(view=>{if(view.meta.affix&&view.meta.matchedKey){letarr=obj[view.meta.matchedKey]||[]if(!arr.includes(view.name)){arr.push(view.name)}obj[view.meta.matchedKey]=arr}elseif(view.matched&&!view.meta.noCache){constmatched=view.matchedconstlen=matched.lengthif(len<2)returnfor(letidx=0;idxv.path===view.path)&&state.isRefresh===false)returnstate.isRefresh=falseview=filterView(view)constidx=state.visitedViews.findIndex(v=>v.name===view.name)if(idx>-1){state.visitedViews.splice(idx,1,{...view,title:view.meta.title||''})}else{state.visitedViews.push({...view,title:view.meta.title||''})}dispatch('setMatched')}catch(error){console.log('addView'，错误）;}},delView({dispatch,state},view){returnnewPromise(resolve=>{constidx=state.visitedViews.findIndex(i=>i.path===view.path)if(idx>-1){state.visitedViews.splice(idx,1)}dispatch('setMatched')resolve({visitedViews:state.visitedViews})})},refreshView({dispatch,state}},view){returnnewPromise(resolve=>{letname=view.nameletkey='layout'if(view.matched){constlen=view.matched.lengthkey=view.matched[len-2].名称}state.cached[key]=state.cached[key].filter(i=>i!==name)state.isRefresh=trueresolve()})},delOthersViews({dispatch,state},view){returnnewPromise(resolve=>{letarr=state.visitedViews.filter(i=>i.meta.affix)if(view&&!view.meta.affix){arr.push(view)}state.visitedViews=arrdispatch('setMatched')resolve({visitedViews:arr})})},}exportdefault{namespaced:true,state,mutations,actions}layout中TagsView组件方法修改：调用actions方法修改initTags(){this.affixTags=this.filterAffixTags(this.routes)for(consttagofthis.affixTags){//必须有标签名if(tag.name){this.$store.dispatch('tagsView/addView',tag)}}}addTags(){constroute=this.getActiveRoute(this.$route)const{name}=routeif(name){this.$store.dispatch('tagsView/addView',route)}returnfalse},refreshSelectedTag(view){this.$store.dispatch('tagsView/refreshView',view).then(()=>{const{fullPath}=viewthis.$nextTick(()=>{这个。$router.replace({path:'/redirect'+fullPath})})})},closeSelectedTag(view){if(view.meta&&view.meta.affix)returnthis.$store.dispatch('tagsView/delView',view).then(({visitedViews})=>{if(this.isActive(view)){this.toLastView(visitedViews,view)}})},closeOthersTags(){this.$router.push(this.selectedTag)this.$store.dispatch('tagsView/delOthersViews',this.selectedTag).then(()=>{this.moveToCurrentTag()})},closeAllTags(view){this.$store.dispatch('tagsView/delOthersViews').then(({visitedViews})=>{这个。toLastView(visitedViews,view)})},layout/index中的transformation将AppMain标签替换为风格，当然是复制之后上面的改造，就是可以愉快的写多级路由了！！！
