基于vue-element-admin框架 的多级路由缓存
https://juejin.im/post/6895228036342513672
效果图
image
1. keep-alive 路由缓存原理
keep-alive根据路由名称缓存 对应页组件 name 属性必须和 include 数组中一样
cachedViews 数组由store维护
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view />
</keep-alive>
</transition>
2. 路由缓存方案
-
在vue-element-admin中跟路由是src/layout/component/AppMain文件，只有一级路由，多级路由是新建一个空的路由文件来实现的。
-
本方案使用一个同一个文件实现多级路由，不用再另外写空路由文件。
原理
-
keep-alive必须是通过组件名字来匹配的，想用一个组件文件来复用的问题在于如何动态改变组件的名字。
-
组件是在router中配置的，在这里给组件改名还是比较麻烦的，尝试了各种方法终于实现了动态改变组件名字的效果 (没错就是用的重命名大法~~)。
-
子路由文件demo：
import EmptyRoute from '@/layout/EmptyRoute' export default { path: '/lab', component: load('layout/index'), redirect: 'noRedirect', name: 'layout', alwaysShow: true, meta: { title: '实验室', }, children: [ { path: 'todo-list', component: load('views/lab/todo/list/index'), name: 'lab-todo-list', meta: { title: '待办事项' } }, { path: 'todo-list-detail/:id', component: load('views/lab/todo/list/detail'), name: 'lab-todo-list-detail', hidden: true, meta: { title: '查看待办事项', activeMenu: '/lab/todo-list', } }, { path: 'common', name: 'common', redirect: 'noRedirect',//这个别忘了加 component: { ...EmptyRoute, name: 'common' },//子路由 alwaysShow: true, meta: { title: '通用要求' }, children: [ { path: 'fairness', component: load('views/lab/common/fairness/index'), name: 'lab-common-fairness', meta: { title: '公正性', } }, { path: 'privacy', name: 'privacy', redirect: 'noRedirect', component: { ...EmptyRoute, name: 'privacy' },//子路由 alwaysShow: true, meta: { title: '保密性' }, children: [ { path: 'agreement', component: load('views/lab/common/privacy/agreement/index'), name: 'lab-common-privacy-agreement', meta: { title: '保密协议', } } ] } ] } ] } -
路由文件EmptyRoute.vue
<template> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view /> </keep-alive> </transition> </template> <script> // 配置是否开启路由缓存 import { needTagsView } from "@/settings"; export default { computed: { //从store中获取本级路由需要缓存的路由组件名字 cachedViews() { if (this.routeName && needTagsView) { const cached = this.$store.getters.cached; const cachedViews = cached ? cached[this.routeName] : []; return cachedViews || []; } return []; } }, data() { return { //跟路由名字 这个是路由默认的名字 代替layout中的MainApp routeName: "layout" }; }, created() { //这里重命名路由 this.routeName = this.$options.name || "layout"; } }; </script> -
store中的 tagsView.js 改造
- 一切基于visitedViews： 根据数组中各级route的matched 数组来设置各级别路由应该缓存的路由名字，由cached对象保存，核心方法：setMatched，matched对象使用路由的名字作为key值
image
- 代码
/* eslint-disable no-shadow */
const state = {
isRefresh: false,//是否是刷新的
cached: {},
visitedViews: [],
}
const mutations = {}
function filterView(view) {
if (!view) return view
const {
fullPath,
name,
path,
meta,
params,
query,
matched
} = view
return {
fullPath,
name,
path,
meta,
params,
query,
matched: matched ? matched.map(i => ({
meta: i.meta,
name: i.name,
path: i.path,
})) : undefined
}
}
const actions = {
retsetState({ state }) {
state.visitedViews = []
state.cached = {}
},
setMatched({ dispatch, state }) {
const obj = {}
state.visitedViews.forEach(view => {
if (view.meta.affix && view.meta.matchedKey) {
let arr = obj[view.meta.matchedKey] || []
if (!arr.includes(view.name)) {
arr.push(view.name)
}
obj[view.meta.matchedKey] = arr
} else if (view.matched && !view.meta.noCache) {
const matched = view.matched
const len = matched.length
if (len < 2) return
for (let idx = 0; idx < matched.length; idx++) {
const key = matched[idx].name;
if (idx < len - 1) {
const vnext = matched[idx + 1];
const { meta, name } = vnext
if (meta && (meta.affix || !meta.noCache)) {
let arr = obj[key] || []
if (!arr.includes(name)) {
arr.push(name)
}
obj[key] = arr
}
}
}
}
})
state.cached = obj
},
addView({ dispatch, state }, view) {
try {
if (state.visitedViews.some(v => v.path === view.path) && state.isRefresh===false) return
state.isRefresh = false
view = filterView(view)
const idx = 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', error);
}
},
delView({ dispatch, state }, view) {
return new Promise(resolve => {
const idx = 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) {
return new Promise(resolve => {
let name = view.name
let key = 'layout'
if (view.matched) {
const len = view.matched.length
key = view.matched[len - 2].name
}
state.cached[key] = state.cached[key].filter(i => i !== name)
state.isRefresh = true
resolve()
})
},
delOthersViews({ dispatch, state }, view) {
return new Promise(resolve => {
let arr = state.visitedViews.filter(i => i.meta.affix)
if (view && !view.meta.affix) {
arr.push(view)
}
state.visitedViews = arr
dispatch('setMatched')
resolve({ visitedViews: arr })
})
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
- layout中TagsView组件方法改造：调用actions方法变化
initTags() {
this.affixTags = this.filterAffixTags(this.routes)
for (const tag of this.affixTags) {
// Must have tag name
if (tag.name) {
this.$store.dispatch('tagsView/addView', tag)
}
}
}
addTags() {
const route = this.getActiveRoute(this.$route)
const { name } = route
if (name) {
this.$store.dispatch('tagsView/addView', route)
}
return false
},
refreshSelectedTag(view) {
this.$store.dispatch('tagsView/refreshView', view).then(() => {
const { fullPath } = view
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
})
},
closeSelectedTag(view) {
if (view.meta && view.meta.affix) return
this.$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 }) => {
this.toLastView(visitedViews, view)
})
},
-
layout/index 中的改造
把 AppMain 标签更换 <section class="app-main"> <EmptyRoute></EmptyRoute> </section> 样式当然照搬过来
网友评论