vue3项目如何使用keepAlive？如何实现回退到这个页面时不刷新，跳转至这个页面时会刷新？

前言：

 页面A为首页面、页面B为设置了keepAlive的页面、页面C为新页面

问题：

只有第一次进入项目时，页面B加载一次，之后无论跳转还是切换都不刷新页面B了！！！o(╯□╰)o

要求：

只要是跳转至页面B，刷新B

只要是回退到页面B，不刷新B

解决：

加代码，App页面加入:key="$route.fullPath"，跳转时加个实时时间的参数即可，代码如下：

一、如何给页面B设置keepAlive，保证这个页面不刷新

App.vue页面

<template>
  <div id="app">
  <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.fullPath"/>
        </keep-alive>
        <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.fullPath"/>
   </router-view>
</div>
</template>

router/index.js页面

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), // 使用 process.env.BASE_URL
  routes: [
   {
      path: '/B',
      name: 'B',
      component: () => import('../view/test/B.vue'),
      meta: { //只需要加入这个就行了
        keepAlive: true,
      },
    }
  ],
})

export default router

二、实现A跳转B时，刷新页面B

页面A：

<template>
  <button @click="jumpButton">A页面</button>
</template>
<script setup>
const wheelButton = () => {
    nextTick(() => { //等待路由加载完再跳转
        router.push({
        path: '/B',
        query: { reload: Date.now() } // reload 参数确保URL变化(使用keepalive时要求重新进入这个页面强制刷新)
  });
  });
}
</script>

这样就能实现，A跳转B刷新B，C回退B不会刷新B了~(*￣︶￣)