在路由配置里面把需要缓存的路由的meta添加keepAlive属性，值为true, 这个想必大家都知道，是缓存路由组件的
在我们项目里面，需要缓存的路由是pageAList，所以这个路由的meta的keepAlive设置成true,其他路由正常写，路由文件src/router/index.js如下：
import Vue from 'vue' import Router from 'vue-router' import home from '../pages/home' import pageAList from '../pages/pageAList' import pageADetail from '../pages/pageADetail' import pageB from '../pages/pageB' import main from '../pages/main' Vue.use(Router) export default new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'main', component: main, redirect: '/home', children: [ { path: 'home', name: 'home', component: home }, { path: 'pageAList', name: 'pageAList', component: pageAList, meta: { keepAlive: true } }, { path: 'pageB', component: pageB } ] }, { path: '/pageADetail', name: 'pageADetail', component: pageADetail } ] })
3. vuex配置
vuex的store.js里面存储一个名为excludeComponents的数组,这个数组用来操作需要做缓存的组件
state.js
const state = { excludeComponents: [] } export default state
同时在mutations.js里面加入两个方法， addExcludeComponent是往excludeComponents里面添加元素的，removeExcludeComponent是往excludeComponents数组里面移除元素
注意： 这两个方法的第二个参数是数组或者组件name
mutations.js
const mutations = { addExcludeComponent (state, excludeComponent) { let excludeComponents = state.excludeComponents if (Array.isArray(excludeComponent)) { state.excludeComponents = [...new Set([...excludeComponents, ...excludeComponent])] } else { state.excludeComponents = [...new Set([...excludeComponents, excludeComponent])] } }, // excludeComponent可能是组件name字符串或者数组 removeExcludeComponent (state, excludeComponent) { let excludeComponents = state.excludeComponents if (Array.isArray(excludeComponent)) { for (let i = 0; i < excludeComponent.length; i++) { let index = excludeComponents.findIndex(v => v === excludeComponent[i]) if (index > -1) { excludeComponents.splice(index, 1) } } } else { for (let i = 0, len = excludeComponents.length; i < len; i++) { if (excludeComponents[i] === excludeComponent) { 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> <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, total: 0, allList: [], list: [] } }, methods: { getVideoList () { let params = {currentPage: this.currentPage, pageSize: this.pageSize} getVideoList(params).then(r => { if (r.code === 0) { this.list = r.data.list this.total = r.data.total } }) }, goIntoVideo (item) { this.$router.push({name: 'pageADetail', query: {id: item.id}}) }, handleCurrentPage (val) { this.currentPage = val this.getVideoList() } }, beforeRouteEnter (to, from, next) { next(vm => { vm.$store.commit('removeExcludeComponent', 'pageAList') next() }) }, beforeRouteLeave (to, from, next) { let reg = /pageADetail/ if (reg.test(to.name)) { this.$store.commit('removeExcludeComponent', 'pageAList') } else { this.$store.commit('addExcludeComponent', 'pageAList') } next() }, activated () { this.getVideoList() }, mounted () { this.getVideoList() } }