From 59a412ace3d982b5186fa0a6c3aff1ec4adc7b3f Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 24 Aug 2023 16:24:59 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20router-view=20?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=20key=20=E7=9A=84=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/AppMain.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/layouts/components/AppMain.vue b/src/layouts/components/AppMain.vue
index 5a9bc9b..1550082 100644
--- a/src/layouts/components/AppMain.vue
+++ b/src/layouts/components/AppMain.vue
@@ -1,24 +1,16 @@
 <script lang="ts" setup>
-import { computed } from "vue"
-import { useRoute } from "vue-router"
 import { useTagsViewStore } from "@/store/modules/tags-view"
-
-const route = useRoute()
 const tagsViewStore = useTagsViewStore()
-
-const key = computed(() => {
-  // 返回 route.path 和 route.fullPath 有着不同的效果，大多数时候 path 更通用
-  return route.path
-})
 </script>
 
 <template>
   <section class="app-main">
     <div class="app-scrollbar">
-      <router-view v-slot="{ Component }">
+      <!-- key 采用 route.path 和 route.fullPath 有着不同的效果，大多数时候 path 更通用 -->
+      <router-view v-slot="{ Component, route }">
         <transition name="el-fade-in" mode="out-in">
           <keep-alive :include="tagsViewStore.cachedViews">
-            <component :is="Component" :key="key" />
+            <component :is="Component" :key="route.path" />
           </keep-alive>
         </transition>
       </router-view>