From b6778fe1d9b3806e4f4d84bcac6f018a45f39413 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 1 Feb 2024 18:19:38 +0800
Subject: [PATCH] s

---
 src/views/navigation/index.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/views/navigation/index.vue b/src/views/navigation/index.vue
index f841798..17f4738 100644
--- a/src/views/navigation/index.vue
+++ b/src/views/navigation/index.vue
@@ -1,15 +1,23 @@
 <script setup>
-import pcIndex from '@/views/navigation/pc-index.vue'
-import modelIndex from '@/views/navigation/model-index.vue'
-import {ref} from "vue";
-const mediaQueryList = window.matchMedia('(max-width: 768px)');
-const currentComponent=ref(modelIndex)
-mediaQueryList.addListener(function(event) {
-  if (event.matches) {
-    currentComponent.value=modelIndex
-  } else {
-    currentComponent.value=pcIndex
-  }
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import PcIndex from '@/views/navigation/pc-index.vue';
+import ModelIndex from '@/views/navigation/model-index.vue';
+
+const mediaQuery = '(max-width: 768px)';
+const currentComponent = ref(window.matchMedia(mediaQuery).matches ? ModelIndex : PcIndex);
+function handleMediaQuery(event) {
+  currentComponent.value = event.matches ? ModelIndex : PcIndex;
+}
+
+let mediaQueryList;
+
+onMounted(() => {
+  mediaQueryList = window.matchMedia(mediaQuery);
+  mediaQueryList.addEventListener('change', handleMediaQuery);
+  handleMediaQuery(mediaQueryList);
+});
+onBeforeUnmount(() => {
+  mediaQueryList.removeEventListener('change', handleMediaQuery);
 });
 </script>
 <template>