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 选项,无需再手动声明,参考