feat: 清除缓存页面

src/components/RouteCache.vue

@@ -1,17 +1,18 @@
 <template>
-	<div class="routeCache" :view-type="viewType">
-		<router-view v-slot="{ Component, route }" @view-type="changeViewType">
-			<keep-alive :include="cachedViews">
-				<component :is="Component" :key="route.name" />
-			</keep-alive>
-		</router-view>
-	</div>
+  <div class="routeCache" :view-type="viewType">
+    <router-view v-slot="{ Component, route }" @view-type="changeViewType">
+      <keep-alive :include="cachedViews">
+        <component :is="Component" :key="route.name" />
+      </keep-alive>
+    </router-view>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
+import MyEvent from '@/utils/myEvent'
 
 const route = useRoute()
 
@@ -54,18 +55,21 @@ const clearCache = (routeName?: string) => {
   }
 }
 
+onMounted(() => {
+  MyEvent.add('clearAllCache', clearCache)
+})
+
 //根据viewType设置布局风格样式
 const viewType = ref(0)
 const changeViewType = (v: number) => {
-	viewType.value = v
+  viewType.value = v
 }
 const router = useRouter()
 watch(
-	() => router.currentRoute.value,
-	() => (viewType.value = 0)
+  () => router.currentRoute.value,
+  () => (viewType.value = 0)
 )
 
-
 // 暴露方法供外部使用
 defineExpose({
   clearCache,
@@ -73,15 +77,15 @@ defineExpose({
 })
 </script>
 <style lang="less" scoped>
-	.routeCache {
-		width: 100%;
-		height: 100%;
-		position: relative;
-		font-family: 'satoshiRegular';
-		&[view-type='1'] {
-			display: flex;
-			flex-direction: column;
-			overflow: hidden;
-		}
-	}
-</style>
+.routeCache {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  font-family: 'satoshiRegular';
+  &[view-type='1'] {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+</style>