一、在APP.vue文件添加keep-alive标签

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

二：在router路由文件下的相关路由中，添加meta属性keepAlive。

{
  path: '/demo',
  name: 'demo',
  component: () => import('../views/demo/demo.vue'),
  meta: {
    keepAlive: false,
  }
},

三：在页面中进行配置

方法一: 在需要返回的页面中，添加onBeforeRouteLeave

所有从当前页面返回上一页面的方式

import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave(to,from,next){
   to.meta.keepAlive = true
   next(0)
 }

返回目的页面goodsShare需要缓存

import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave(to,from,next){
   if(to.path == '/goodsShare'){
      to.meta.keepAlive = true
      next(0)
    } else {
      next()
    }
 }

方法二: 在页面二中，返回跳转按钮方法初修改路由返回方式

通过某按钮返回的方式

import { useRouter } from 'vue-router'
const router = useRouter()
router.go(-1)
//或者
router.back()