s

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>