Vue3后退不刷新，前进刷新

核心思想

1. 使用keep-alive缓存页面信息
2. 由于vue3中keep-alive只能通过组件名称缓存，每次都会动态创建一个新的组件包装下页面
3. 每次路由前进时会根据路由的深度分配一个uuid并缓存，然后用此uuid创建一个动态组件包装页面
4. 此方法可以解决a->b->a->c 然后后退 c->a->b->a的问题

PageKeepAlive组件源码

<template>
  <keep-alive :include="include">
    <component v-if="node" :is="node" :key="data.cid" />
  </keep-alive>
</template>
<script setup>
import { uuid } from '@/common/utils/StringUtil'
import { defineComponent, computed, reactive, nextTick, shallowReactive } from 'vue'
import { useRouter } from 'vue-router'
import throttle from 'lodash/throttle'


const props = defineProps(['data'])

const router = useRouter()

const comp_cache = shallowReactive({})
const position_cache = reactive({})

const include = computed(() => {
  let target = []
  let expired = new Set(Object.keys(comp_cache))
  for (let cache of Object.values(position_cache)) {
    target.push(cache.cid)
    expired.delete(cache.cid)
  }
  if (expired.size > 10) { // 批量清理
    clearCache(expired)
  }
  return target
})

const clearCache = throttle((keys) => {
  console.log('PAGE KEEP CALL', keys)
  nextTick(() => {
    for (let cid of keys) {
      if (!comp_cache[cid]) {
        continue
      }
      delete comp_cache[cid]
      console.log('PAGE KEEP CLEAR', cid)
    }
  })
}, 10000)

const node = computed(() => {
  let data = props.data
  if (!data || !data.cid || !data.comps) return null
  if (!comp_cache[data.cid]) {
    comp_cache[data.cid] = defineComponent({
      name: data.cid,
      setup() {
        return () => data.comps
      }
    })
  }
  return comp_cache[data.cid]
})

router.afterEach((to) => {
  let current = window.history.state.position
  let path = to.path
  for (let i of Object.keys(position_cache)) {
    let cache = position_cache[i]
    if (i > current) { // 大于当前位置的缓存清理掉
      delete position_cache[i]
    }
    if (i == current && cache.path != path) { // replace需要去掉缓存
      delete position_cache[i]
    }
  }
  let cache = position_cache[current]
  if (!cache) {
    position_cache[current] = cache = {
      cid: `comp_${uuid()}`,
      path
    }
  }
  to.meta.cid = cache.cid
})
</script>

使用方式

<router-view v-slot="{ Component, route  }">
	<PageKeepAlive :data="{cid: route.meta.cid, comps: Component}" />
</router-view>