1、include 包含页面组件name的这些组件页面,会被缓存起来
2、exclude 除了这些name以外的页面组件,会被缓存起来
3、没有include或者exclude属性,表示所有的路由组件都会被缓存起来
<keep-alive>
<router-view :key="key" />
</keep-alive>
computed: {
key() {
return this.$route.path
}
}
注意
include 或者exclude的name 是页面组件里面具体的name,区分大小写
访问三级路由时,3级根路由的名称不会存入state.tagsView.cachedViews中,所以三级路由页面不会缓存。
解决方案:
在三级路由根页面中的created方法内,将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存了
<script>
export default {
name: 'Menu1',
data() {
return {
...
}
},
created() {
const route = this.$route.matched.find(item => item.name === this.$options.name)
this.$store.dispatch('tagsView/addCachedView', route)
}
}
</script>