masger

src/layout/components/appMain.vue

@@ -2,22 +2,25 @@
 
 </style>
 <template>
-	<transition name="fade-transform" mode="out-in">
+	<!-- <transition name="fade-transform" mode="out-in"> -->
-		<router-view v-slot="{ Component }" :key="$route.path">
+		<router-view v-slot="{ Component }">
-			<keep-alive :include="cacheViews">
+			<transition name="fade-transform" mode="out-in">
-				<component :is="Component"/>
+				<keep-alive :include="cachedViews">
-			</keep-alive>
+					<component :is="Component" v-if="cached" :key="$route.path"/>
+				</keep-alive>
+			</transition>
+			<component :is="Component" :key="$route.path" v-if="!cached"/>
 		</router-view>
-	</transition>
 </template>
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, shallowRef } from 'vue'
 
 export default defineComponent({
 	name:"appMain",
 	setup() {
 		var _data={
-			cacheViews:['home','about']
+			cachedViews:shallowRef(['about','home','demo']),
+			cached:true,
 		}
 
 		return _data;

src/layout/components/sidebar/sidebarItem.vue

@@ -2,7 +2,7 @@
 
 </style>
 <template>
-	<template v-if="!item?.hidden">
+	<template v-if="!item?.meta?.hidden">
 		<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren) && !item.alwaysShow">
 			<el-menu-item :index=" /^\//.test(onlyOneChild.path)?onlyOneChild.path:basePath " >
 				<item :icon="onlyOneChild.meta?.icon||''" :title="onlyOneChild.meta?.title||''"/>
@@ -45,7 +45,7 @@ export default defineComponent({
 			onlyOneChild:shallowRef({}),
 			hasOneShowingChild(children=[],parent){
 				var showingChildren=children.filter(i=>{
-					if(i.hidden)return false;
+					if(i?.meta?.hidden)return false;
 					else{
 						_data.onlyOneChild.value=i;
 						return true

src/router/index.js

@@ -14,22 +14,12 @@ export const menu=[
       icon:"atm",
     },
     children:[
-      {
+      {path:"path1", meta:{ title:"about", icon:"atm", }, component:()=>import("@/views/About.vue")},
-        path:"path1",
+      {path:"path2", meta:{ title:"home", icon:"atm", }, component:()=>import("@/views/Home.vue")},
-        component:()=>import("@/views/About.vue"),
+      {path:"path3", meta:{ title:"demo", hidden:true, icon:"atm", }, component:()=>import("@/views/Demo.vue")},
-        meta:{
+      
-          title:"about",
+      {path:"path4", meta:{ title:"demo2", icon:"atm", }, component:()=>import("@/views/Demo.vue")},
-          icon:"atm",
+      {path:"path5", meta:{ title:"demo3", icon:"atm", }, component:()=>import("@/views/Demo.vue")},
-        },
-      },
-      {
-        path:"/path2",
-        component:()=>import("@/views/Home.vue"),
-        meta:{
-          title:"home",
-          icon:"atm",
-        }
-      },
     ],
   }
 ]

src/store/modules/data.js

@@ -3,6 +3,9 @@ export default {
 	state:{
 		menu:{},
 	},
+	getters:{
+		menuName:state=>Object.values(state.menu).map(v=>v.name)
+	},
 	mutations:{
 		setMenu(state,val){
 			state.menu[val.key]=val.item

src/views/Demo.vue

@@ -0,0 +1,16 @@
+<template>
+	<div>
+		<h1>demo</h1>
+		<button @click="$router.back()">上一页</button>
+	</div>
+</template>
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name:"demo",
+	setup() {
+		console.log("--------------demo-------------")
+	},
+})
+</script>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <h1>This is an home page</h1>
-    <svg-icon iconClass="atm"/>
+    <svg-icon iconClass="atm" @click="$router.push({path:'/path3'})"/>
   </div>
 </template>