如果想讓vue的所有頁面都保持keepAlive的狀態(tài)。只需要在app.vue的router-view外面套一層keep-alive

<keep-alive>
    <router-view></router-view>
 </keep-alive>

如果只想讓某些路由保持keepAlive，只需要向keep-alive傳入include（不想讓某些路由keepAlive，其他的都keepAlive。則需傳入exclude）

<keep-alive :include=['router-name1', 'router-name2']>
    <router-view></router-view>
 </keep-alive>

而include的數(shù)組完全可以通過函數(shù)獲取。所以只需要在router.js中，在定義每個路由時說明其是keepAlive，并且在app.js中能夠獲取到該狀態(tài)即可。這里給出的做法是定義路由時，通過meta給出狀態(tài),并將該狀態(tài)的路由存入sessionStorage，在app.js中再通過sessionStorage取出來。

import Router from 'vue-router'
const routes = [
{
    name: 'home',
    path: '/home',
    component: () => import('..xxx'),
    meta: {
      title: 'xxx',
      desc: 'xxx',
      keepAlive: true
    }
  }
]
const router = new Router({
  routes
})
const includeRouters = sessionStorage.get('keepAliveRouters') || []  //需自己封裝sessionStorage
router.beforeEach(function (to, from, next) {
    if (to.meta) {
      if (to.meta.keepAlive) {
          includeRouters.push(router.name) //建議自己封裝pushX,已經(jīng)存入則不必再存
      } else {
          includeRouters.remove(router.name) // 自己封裝remove，如果已經(jīng)存入，則取出
        }
      sessionStorage.set('keepAliveRouters', includeRouters)
    }
  next()
}
export default router

此時，在進(jìn)入某個路由前，路由的地址已經(jīng)存入了sessionStorage
app.vue中需要watch $router ,并從sessionStorage中取出，放到data里。
keepAlive的:include再返回data中剛放入的地址數(shù)組