Vue3里单页面应用（SPA）参数路由多实例缓存冲突问题

Vue SPA页面会有单组件多实例的参数路由情况，比如现有用户信息如下

{
  path: "/user/:uid",
  name: "user",
  component: () => import("@/views/**/user.vue"),
  params: {uid: 1},
  ...
}

那么缓存路由组件可以写成以下形式

<template>
    <router-view v-slot="{Component}">
        <keep-alive :include="includeRoutes">
            <component :is="Component" :key="$route.path"></component>
        </keep-alive>
    </router-view>
</template>

核心部分是component绑定key为$route.path
注意vue3和vue2的RouterView与KeepAlive组件嵌套关系是不一样的，如果不合适，控制台会有警告
注意路由组件要有名称
注意嵌套路由组件也要有名称

注：

• 在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明，参考

转载请注明出处@https://www.cnblogs.com/noah227/p/16669160.html