使用vue-element-admin脚手架做系统时,一般系统的侧边栏都是有父级,子级,子子级,发现使用keep-alive,当三级以上的路由时,无法缓存页面??
那首先要了解下keep-alive的作用是啥?
是用来对页面组件进行缓存不缓存的处理,拥有缓存页面组件,再次进入时,使用原来已经加载好的内容,可以大大的节省请求和渲染时间,是个好东西!
那它具体的属性有2种:
include ,包含页面组件name的这些组件页面,会被缓存起来
exclude 除了这些name以外的页面组件,会被缓存起来
还有第3种,如下这样写(即没有include或者exclude属性,表示所有的路由组件都会被缓存起来!!)
坑点一
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path
}
}
}
</script>
坑点二:
发现keep-alive中的include属性或者exclude属性都不管用!后来查阅了一番,发现这个include 或者exclude的name 是页面组件里面具体的name, 就像这样:(凡是是路由组件,在对应的这个组件页面显示的添着补上对应的name属性啊!别偷懒!)
这个具体vue组件页面的name要跟你router文件中配置的name一样
因为在每次打开标签页和关闭标签页处理时,是根据name来匹配,进行添加删除。如果组件内部页面配置的name是Order,而路由文件配置的name是order,那include和exclude也不会有用!
坑点三:
修改模板src/store/modules/tagsView.js
tagsView.js
addCachedView({ commit }, view) {
if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由点击打开标签页时,将三级路由或以上的根目录路由塞入缓存路由name list中
commit('ADD_CACHED_VIEW', view.matched[1])
}
commit('ADD_CACHED_VIEW', view) // 反之,正常的进行标签页的添加进缓存路由name list中
},
delCachedView({ commit, state }, view) {
return new Promise(resolve => {
if (view.matched && view.matched.length >= 3) { // 若为三级及其以上路由关闭当前标签页时,将3级路由以上的根目录name 从list中删除
commit('DEL_CACHED_VIEW', view.matched[1])
}
commit('DEL_CACHED_VIEW', view) // 反之,正常的进行标签页的name 从list中删除
resolve([...state.cachedViews])
})
},