s

src/views/navigation/index.vue

@@ -1,29 +1,12 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
 import PcIndex from '@/views/navigation/pc-index.vue';
 import ModelIndex from '@/views/navigation/model-index.vue';
 import {useAdaptation} from '@/utils/self-adaption.js'
-const {currentDevice}= useAdaptation((currentDevice)=>{
-  console.log(currentDevice,'currentDevice')
-})
-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);
-});
+const {currentDevice}= useAdaptation()
 </script>
 <template>
  <div>
-   <component :is="currentComponent" />
+   <component :is="currentDevice==='pc'?PcIndex:ModelIndex" />
  </div>
 </template>
 <style scoped lang="scss">