excludeComponents.splice(i, 1)
break
}
}
}
state.excludeComponents = excludeComponents
}
}
export default mutations
4. keep-alive包裹router-view
将App.vue的router-view用keep-alive组件包裹， main.vue的路由也需要这么包裹，这点非常重要，因为pageAList组件是从它们的router-view中匹配的
<keep-alive :exclude=”excludeComponents”><som-component></some-component></keep-alive>这个写法大家应该不会陌生，这也是尤大神官方推荐的缓存方法, exclude属性值可以是组件名称字符串(组件选项的name属性)或者数组，代表不缓存这些组件，所以vuex里面的addExcludeComponent是代表要缓存组件，addExcludeComponent代表不缓存组件，这里稍微有点绕，请牢记这个规则，这样接下来你就不会被绕进去了。
App.vue
<template>
<div id="app">
<keep-alive :exclude="excludeComponents">
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template><script>
export default {
name: 'App',
computed: {
excludeComponents () {
return this.$store.state.excludeComponents
}
}
}
</script
main.vue
<template>
<div>
<ul>
<li v-for="nav in navs" :key="nav.name">
<router-link :to="nav.name">{{nav.title}}</router-link>
</li>
</ul>
<keep-alive :exclude="excludeComponents">
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'main.vue',
data () {
return {
navs: [{
name: 'home',
title: '首页'
}, {
name: 'pageAList',
title: 'pageAList'
}, {
name: 'pageB',
title: 'pageB'
}] }
},
methods: {
},
computed: {
excludeComponents () {
return this.$store.state.excludeComponents
}
},
created () {
}
}
</script>接下来的两点设置非常重要
5. 一级组件
对于需要缓存的一级路由pageAList，添加两个路由生命周期钩子beforeRouteEnter和beforeRouteLeave
import {getVideoList} from '../api'
export default {
name: 'pageAList', // 组件名称，和组件对应的路由名称不需要相同
data () {
return {
currentPage: 1,
pageSize: 10,
