keep-alive应用——实现路由切换选择性缓存路由

---

背景

项目中有比较多的列表页及对应的详情页面，列表页有较多的查询项，当筛选了条件进行查询之后，点击列表数据穿透到对应的详情页查看详情信息，从详情页面返回之后，如果列表页面重新渲染，会导致之前的筛选项被清空，并且每次重新查询默认的第一页数据。从详情页面返回列表数据是不会刷新的，如果缓存了 A 页面组件，可优化去除不必要的请求，减少资源消耗，并且还能保留页面状态，包括查询项目已经选择的数据，对用户的交互效果也更友好。

---

场景一

A 页面是列表页，B 页面是由 A 中某条数据穿透之后的详情页，C 页面是另一个列表页。

• 当从 A 页面进入 B 页面时，需要缓存 A 路由组件，而 B 页面返回 A 页面，B 路由不缓存
• 再从 A 页面进入 C 页面，需要清除 A 路由组件的缓存效果

实现单向的路由跳转缓存指定路由。

1. 路由配置

// route.js
const routes = [
  {
     name: 'A',
     path: '/A',
     meta: {
       title: 'A页面',
       keepAlive: true, // 配合 keepAliveToRouteName 表示去到 B/D 页面时 A 页面需要缓存
       keepAliveToRouteNames: ['B', 'D']
     },
     component: resolve => require(['./A'], resolve)
   },
   {
     name: 'B',
     path: '/B',
     meta: {
       title: 'B页面',
     },
     component: resolve => require(['./B'], resolve)
   },
   {
     name: 'C',
     path: '/C',
     meta: {
       title: 'C页面',
     },
     component: resolve => require(['./C'], resolve)
   }
 ]
 export default routes

2. App.vue

<template>
  <div id="app">
    <keep-alive v-if="!clearKeepAlive" class="body-container">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      clearKeepAlive: false
    }
  },
  watch: {
    $route() {
      if ($session.get('CLEARKEEPALIVE')) {
        $session.remove('CLEARKEEPALIVE')
        this.clearKeepAlive = true
        setTimeout(() => {
          this.clearKeepAlive = false
        }, 10)
      }
    }
  },
}
</script>

注意：从A进入B之后，A已被缓存，再从B回到A，A是不会重新组件的状态，但是此时从A跳转到C，再回到A，A组件的状态依旧不会更新，解决这个问题就引入了 clearKeepAlive 变量，当值为 true 的时候，路由组件不包裹在 keep-alive 组件中。clearKeepAlive 值的变化配合全局路由守卫进行修改。

3. 全局路由守卫

router.beforeEach((to, from, next) => {
  if (to.meta.keepAliveToRouteNames) to.meta.keepAlive = true
  if (from.meta.keepAliveToRouteNames) from.meta.keepAlive = true
  // 判断路由缓存
  let frs = from.meta.keepAliveToRouteNames || []
  let trs = to.meta.keepAliveToRouteNames || []
  if (from.name && to.name) {
    if (frs.includes(to.name)) {
      from.meta.keepAlive = true
      if (!trs.includes(from.name)) to.meta.keepAlive = false
    } else if (trs.includes(from.name)) {
      to.meta.keepAlive = true
      if (!frs.includes(to.name)) from.meta.keepAlive = false
    } else {
      session.set('CLEARKEEPALIVE', true)
    }
  }
})

---

场景二

在场景一的基础上，A列表页进入B详情页，而B组件可能是同时复用在详情、新增、编辑页面，此时从A页面进入新增和编辑页面时，当数据保存成功时，回到列表页需要重新请求服务器加载列表数据等，A页面的状态还是需要缓存起来。

1. 全局组件通信

使用插件把 $bus 对象挂载到 Vue 原型上，它包含三个方法

export default {
  install: Vue => {
    Vue.prototype.$bus = new Vue({
      methods: {
        emit(event, ...args) {
          this.$emit(event, ...args)
        },
        on(event, callback) {
          this.$on(event, callback)
        },
        off(event, callback) {
          this.$off(event, callback)
        }
      }
    })
  }
}

2. B 页面中发送消息

在 B.vue 中，保存数据成功之后，发送消息给 A 组件

this.$bus.emit('refreshList', true)

3. A 页面中接收消息

在 A.vue 中，需要在 activated 钩子中接收消息

activated() {
  this.$bus.on('refreshList', val => val && this.fetchList())
},
deactivated() {
  this.$bus.off('refreshList')
}