【vue3.0】keep-alive 路由页面缓存

前言

在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，是不需要重新加载的。

先简单介绍一下什么情况下会用到keep-alive

1，当使用路由跳转到其他页面的时候，要求缓存当前页面，比如在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。
2，在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据。

keep-alive用法

1，Vue中提供了一个内置组件keep-alive，使用元素将动态组件包裹起来，内部组件就会被缓存起来。
2，包裹的组件，加载过的页面，再次进入时，是不会执行页面第一次进入时的部分生命周期函数。
3，包裹的组件会新增两个生命周期函数activated和deactivated.
两个属性include和exclude可以让实现有条件的进行缓存。include包含的组件会被进行缓存，exclude包含的组件不会被缓存。

keep-alive 实现路由页面缓存的俩中方式

1，使用include控制需要缓存的页面

<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive>
</router-view>

2，使用router的meta属性控制需要缓存的页面

<router-view v-if='isRouterAlive' v-slot='{Component}'>
  <keep-alive>
    <component :is='Component' v-if='$route.meta.keepAlive' :key='$route.name' />
  </keep-alive>
  <component :is='Component' v-if='!$route.meta.keepAlive' :key='$route.name' />
</router-view>

2-1，动态设置路由是否需要被缓存
App.vue

import router from './router'

router.beforeEach((to, from, next) => {
  const cacheList = to.meta.cacheList
  if (cacheList) {
    if (cacheList.indexOf(from.name) > -1) {
      to.meta.keepAlive = true
    } else {
      if (from.name) {
        to.meta.keepAlive = false
      } else {
        to.meta.keepAlive = true
      }
    }
  }
  next()
})

需要缓存的组件内

import { onBeforeRouteLeave } from 'vue-router'
setup () {
    const store = useStore()
    onBeforeRouteLeave((to, from, next) => {
      const cacheList = ['组织']
      if (cacheList.indexOf(to.name) === -1) {
       	doing()
        nextTick(() => {
			doing()
        })
      }
      next()
    })
    return {
		store,
	}
}