vue3结合keepalive使用路由刷新

路由声明，注意组件中必须设置name属性，includeRouteName是组件name的数组集合，类型为string[]

<RouterView v-slot="{ Component }">
  <KeepAlive :include="includeRouteName">
    <component :is="Component" />
  </KeepAlive>
</RouterView>

<script setup lang="ts">
	import { useLayoutStore } from '@pinia/index'; // pinia，根据自己情况
	const layoutStore = useLayoutStore();
	const includeRouteName = computed(() => layoutStore.routeName);
</script>

pinia数据共享

import { defineStore } from 'pinia';

export const useLayoutStore = defineStore('layout', {
  state: () => {
    return {
      routeName: ['home'], // 缓存的路由name信息
    }
  },
  actions: {
    operaRouteName(type: 'push' | 'delete' | 'deleteAll', nameArr: string[] = []){ // 操作缓存的路由信息
      switch (type) {
        case 'push': // 添加一个
          this.routeName.push(nameArr[0]);
          break;
        case 'delete': // 删除某一个
          const tempRouteName: string[] = [];
          for(let i = 0; i < this.routeName.length; i++){
            if(!nameArr.includes(this.routeName[i]) && this.routeName[i] !== 'home'){
              tempRouteName.push(this.routeName[i]);
            }
          }
          this.routeName = [ ...tempRouteName ];
          break;
        case 'deleteAll':
          this.routeName = ['home']; // 删除所有
          break;
        default:
          break;
      }
    }
  }
})

新建reload.vue，代码如下

<template>
  <div class="reload"></div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    name: 'reload',
    setup(){
      const router = useRouter();
      const replaceRoute = (url: string) => {
        router.replace(url);
      }
      return {
        replaceRoute
      }
    },
    beforeRouteEnter(to, from, next){
      next((vm: any) => {
        vm.replaceRoute(from.fullPath);
      })
    }
  })
</script>

点击刷新按钮

// pinia删除includeRouteName的当前路由
const route = useRoute();
layoutStore.operaRouteName('delete', [route.path.substring(1)]);
router.replace({ path: '/reload' });

路由监听

import { useLayoutStore } from '@pinia/index'; // pinia，根据自己情况
const router = useRouter();
const layoutStore = useLayoutStore();
router.beforeEach((to, from, next) => {
	if(!layoutStore.routeName.includes(to.path.substring(1))){ // 查找是否缓存过这个路由
      layoutStore.operaRouteName('push', [to.name as string]);
    }
});