同时使用transition+keep-alive时二级路由之间跳转会导致页面组件重复渲染

本来想测试一下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时,同属于一个菜单的页面之间跳转没有问题,不同菜单的页面之间跳转会导致页面组件重复渲染

这是我的目录结构
image

这是我的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

已解决,在一级路由处的keep-alive标签下增加一层标签即可,二级路由处不需要修改

如下代码,我增加了一层<el-scrollbar>标签

				<router-view v-slot="{ Component }">
					<transition name="mainRouter">
						<keep-alive>
							<el-scrollbar :key="currentRoute" style="height:100%">
								<component :is="Component" />
							</el-scrollbar>
						</keep-alive>
					</transition>
				</router-view>

另,之前几天也有试过使用div替代el-scrollbar的位置,但是会导致切换路由时transition动画效果不出现,不知道为什么,实在懒得查了就这样吧。