<keep-alive :include="$store.state.cachedRouteNames">
 <router-view />
</keep-alive>

// store/index.js

const store = new vuex.Store({
 state: {
 // 緩存的路由列表
 cachedRouteNames: [],
 },
 mutations: {
 UPDATE_CACHEDROUTENAMES(state,{ action, route }) {
  const methods = {
  'add': () => {
  state.cachedRouteNames.push(route)
  },
  'delete': () => {
  state.cachedRouteNames.splice(state.cachedRouteNames.findIndex((e) => { return e === route}),1)
  }
  }
  methods[action]()
 }
 }
})

// router/index.js

{
 path: '/productslist',
 name: 'ProductsList',
 component: ProductsList,
 meta: {
 keepAlive: true,
 cacheWhenFromRoutes: ['ProductDetail'] // 此處配置的是路由的name
 }
},

// routeControl.js

// 需要緩存的路由名稱數(shù)組
const cachedRouteNames = store.state.cachedRouteNames;

// 定義添加緩存組件name函數(shù)，設(shè)置的是組件的name
const addRoutes = (route) => {
 const routeName = route.components.default.name
 if (routeName && cachedRouteNames.indexOf(routeName) === -1) {
 store.commit('UPDATE_CACHEDROUTENAMES', { action: 'add', route: routeName })
 }
}

// 定義刪除緩存組件name函數(shù)，設(shè)置的是組件的name
const deleteRoutes = (route) => {
 const routeName = route.components.default.name
 if (routeName && cachedRouteNames.indexOf(routeName) !== -1) {
 store.commit('UPDATE_CACHEDROUTENAMES', { action: 'delete', route: routeName })
 }
}

router.beforeEach((to, from, next) => {
 
 // 處理緩存路由開始
 // 在讀取緩存之前，先對(duì)該組件是否讀取緩存進(jìn)行處理
 to.matched.forEach((item, index) => {
 const routes = item.meta.cacheWhenFromRoutes;
 /**
  * 此處有幾種情況
  * 1. 沒有配置cacheWhenFromRoutes, 則一直緩存；
  * 2. 配置了cacheWhenFromRoutes，但是首次打開此web app，則from.name為空，此時(shí)應(yīng)該將該頁面組件的name添加到緩存配置文件中
  * 3. 配置了cacheWhenFromRoutes，from.name不為空，若命中cacheWhenFromRoutes，則添加該頁面組件的name到緩存配置文件中，否則刪除。
  *
  **/
 if (item.meta.keepAlive && (!routes || (routes && (!from.name || routes.indexOf(from.name) !== -1)))) {
  addRoutes(item)
 } else {
  deleteRoutes(item)
 }
 
 })
 // 處理緩存路由結(jié)束

 new Promise(( resolve, reject ) => {
 // ..other codes
 }).then( res => {
 if ( res ) {
  next(res)
 } else {
  next()
 }
 })
})

// 全局混入。此步驟的目的是在該組件被解析之后，若是屬于需要緩存的組件，先將其添加到緩存配置中，進(jìn)行緩存。

// 導(dǎo)航守衛(wèi)的最后一個(gè)步驟就是調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，此時(shí)整個(gè)組件已經(jīng)被解析，DOM也已經(jīng)更新。

Vue.mixin({
 beforeRouteEnter(to, from, next) {
 next(vm => {
  to.matched.forEach((item) => {
  const routeName = item.components.default.name
  if (to.meta.keepAlive && routeName && cachedRouteNames.indexOf(routeName) === -1) {
   store.commit('UPDATE_CACHEDROUTENAMES', { action: 'add', route: routeName })
  }
  })
 })
 },
})