masger

src/layout/components/appMain.vue

@@ -3,9 +3,11 @@
 </style>
 <template>
 	<transition name="fade-transform" mode="out-in">
-		<keep-alive :include="cacheViews">
+		<router-view v-slot="{ Component }" :key="$route.path">
-			<router-view :key="$route.path"/>
+			<keep-alive :include="cacheViews">
-		</keep-alive>
+				<component :is="Component"/>
+			</keep-alive>
+		</router-view>
 	</transition>
 </template>
 <script>

src/layout/components/sidebar/sidebarItem.vue

@@ -65,13 +65,15 @@ export default defineComponent({
 		}
 
 		onMounted(async ()=>{
-			commit('data/setMenu',{
+			if(typeof props.item?.component==='function'){
-				key:props.basePath,
+				commit('data/setMenu',{
-				item:{
+					key:props.basePath,
-					name:(await props.item?.component?.())?.default.name,
+					item:{
-					parentPath:props.item?.meta?.parentPath,
+						name:(await props.item.component())?.default?.name,
-				}
+						parentPath:props.item?.meta?.parentPath,
-			})
+					}
+				})
+			}
 		})
 		return _data;
 	},

src/router/index.js

@@ -1,18 +1,14 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout'
-import Home from '../views/Home.vue'
 
 const routes = [
-  {
+  
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
 ]
 export const menu=[
   {
-    path:"/demo",
+    path:"/",
     component: Layout,
+    redirect:"/path1",
     meta:{
       title:"demo",
       icon:"atm",