From a92069633c922bb0870a035292cb3f32d098f84c Mon Sep 17 00:00:00 2001
From: dingtalk_umvbsp <m13724205240@163.com>
Date: Tue, 11 Jan 2022 13:58:53 +0800
Subject: [PATCH] masger

---
 src/layout/components/appMain.vue             | 19 +++++++++-------
 src/layout/components/sidebar/sidebarItem.vue |  4 ++--
 src/router/index.js                           | 22 +++++--------------
 src/store/modules/data.js                     |  3 +++
 src/views/Demo.vue                            | 16 ++++++++++++++
 src/views/Home.vue                            |  2 +-
 6 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 src/views/Demo.vue

diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index e5de81d..72a6f75 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -2,22 +2,25 @@
 
 </style>
 <template>
-	<transition name="fade-transform" mode="out-in">
-		<router-view v-slot="{ Component }" :key="$route.path">
-			<keep-alive :include="cacheViews">
-				<component :is="Component"/>
-			</keep-alive>
+	<!-- <transition name="fade-transform" mode="out-in"> -->
+		<router-view v-slot="{ Component }">
+			<transition name="fade-transform" mode="out-in">
+				<keep-alive :include="cachedViews">
+					<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;
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 55de770..0927f5c 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/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
diff --git a/src/router/index.js b/src/router/index.js
index b65f335..76bce26 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,22 +14,12 @@ export const menu=[
       icon:"atm",
     },
     children:[
-      {
-        path:"path1",
-        component:()=>import("@/views/About.vue"),
-        meta:{
-          title:"about",
-          icon:"atm",
-        },
-      },
-      {
-        path:"/path2",
-        component:()=>import("@/views/Home.vue"),
-        meta:{
-          title:"home",
-          icon:"atm",
-        }
-      },
+      {path:"path1", meta:{ title:"about", icon:"atm", }, component:()=>import("@/views/About.vue")},
+      {path:"path2", meta:{ title:"home", icon:"atm", }, component:()=>import("@/views/Home.vue")},
+      {path:"path3", meta:{ title:"demo", hidden:true, icon:"atm", }, component:()=>import("@/views/Demo.vue")},
+      
+      {path:"path4", meta:{ title:"demo2", icon:"atm", }, component:()=>import("@/views/Demo.vue")},
+      {path:"path5", meta:{ title:"demo3", icon:"atm", }, component:()=>import("@/views/Demo.vue")},
     ],
   }
 ]
diff --git a/src/store/modules/data.js b/src/store/modules/data.js
index da6c03e..e35cc10 100644
--- a/src/store/modules/data.js
+++ b/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
diff --git a/src/views/Demo.vue b/src/views/Demo.vue
new file mode 100644
index 0000000..137c9e9
--- /dev/null
+++ b/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>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c2da795..2caf5a0 100644
--- a/src/views/Home.vue
+++ b/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>