本来想测试一下vue3 + vue-router4对嵌套路由的路由复用的支持情况的，结果碰到了奇怪的BUG
前提条件：vue-router: @4.0.12，试过@4.0.3BETA并未复现，并且我的这个写法在@4.0.3BETA中是不支持的
有A、B两个菜单，这两个菜单底下分别各有两个页面：MenuAChild1、MenuAChild2、MenuBChild1 和 MenuBChild2，A和B是一级路由，其底下的页面是二级路由
在同时使用transition+keep-alive时，同属于一个菜单的页面之间跳转没有问题，不同菜单的页面之间跳转会导致页面组件重复渲染
这是我的目录结构
这是我的App.vue
<template>
<div>菜单A：</div>
<div>
<router-link to="/MenuAChild1">菜单A页面1</router-link>
</div>
<div>
<router-link to="/MenuAChild2">菜单A页面2</router-link>
</div>
<div>菜单B：</div>
<div>
<router-link to="/MenuBChild1">菜单B页面1</router-link>
</div>
<div>
<router-link to="/MenuBChild2">菜单B页面2</router-link>
</div>
<div style="margin-top:1em;">
<router-view v-slot="{ Component }">
<transition name="mainRouter">
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
</div>
</template>
这是我的菜单，A、B菜单内容相同
<template>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</template>
这是我的页面，四个页面内容相同
<template>
<div class="base-content" key="MenuAChild1">MenuAChild1</div>
</template>
这是我的router.js
import { createRouter, createWebHistory, RouterView } from 'vue-router'
const routerHistory = createWebHistory()
const routes = [{
path: '/',
name: 'Home',
meta: {
title: '首页',
},
component: () => import('../views/Home.vue')
}, {
path: '/MenuA',
name: 'MenuA',
meta: {
title: '菜单A',
},
component: () => import('../views/MenuA/index.vue'),
children: [{
path: '/MenuAChild1',
name: 'MenuAChild1',
meta: {
title: '菜单A页面1',
},
component: () => import('../views/MenuA/MenuAChild1.vue')
}, {
path: '/MenuAChild2',
name: 'MenuAChild2',
meta: {
title: '菜单A页面2',
},
component: () => import('../views/MenuA/MenuAChild2.vue')
}]
}, {
path: '/MenuB',
name: 'MenuB',
meta: {
title: '菜单B',
},
component: () => import('../views/MenuB/index.vue'),
children: [{
path: '/MenuBChild1',
name: 'MenuBChild1',
meta: {
title: '菜单B页面1',
},
component: () => import('../views/MenuB/MenuBChild1.vue')
}, {
path: '/MenuBChild2',
name: 'MenuBChild2',
meta: {
title: '菜单B页面2',
},
component: () => import('../views/MenuB/MenuBChild2.vue')
}]
}]
const router = createRouter({
history: routerHistory,
routes
})
export default router