Sfoglia il codice sorgente

优化视频播放器逻辑,新增路由参数变化监听,改进视频信息加载方式,移除冗余查询参数,提升用户体验

wuyi 3 mesi fa
parent
commit
4e8f95d2ac
1 ha cambiato i file con 18 aggiunte e 13 eliminazioni
  1. 18 13
      src/views/VideoPlayer.vue

+ 18 - 13
src/views/VideoPlayer.vue

@@ -223,7 +223,7 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useRoute, useRouter } from "vue-router";
 import { searchVideoByTags, getVideoDetail } from "@/services/api";
 import { searchVideoByTags, getVideoDetail } from "@/services/api";
 import VideoProcessor from "@/components/VideoProcessor.vue";
 import VideoProcessor from "@/components/VideoProcessor.vue";
@@ -332,16 +332,6 @@ const playVideo = (video: any) => {
   router.push({
   router.push({
     name: "VideoPlayer",
     name: "VideoPlayer",
     params: { id: video.id },
     params: { id: video.id },
-    query: {
-      name: video.name,
-      cover: video.cover,
-      m3u8: video.m3u8,
-      duration: video.duration,
-      view: video.view,
-      like: video.like,
-      time: video.time,
-      taginfo: JSON.stringify(video.taginfo || []),
-    },
   });
   });
 };
 };
 
 
@@ -464,9 +454,24 @@ const loadRelatedVideos = async () => {
   }
   }
 };
 };
 
 
+// 监听路由参数变化
+watch(
+  () => route.params.id,
+  async (newId, oldId) => {
+    if (newId && newId !== oldId) {
+      await loadVideoInfo();
+      await loadRelatedVideos();
+    }
+  },
+  { immediate: true }
+);
+
 onMounted(async () => {
 onMounted(async () => {
-  await loadVideoInfo();
-  await loadRelatedVideos();
+  // 如果路由参数监听没有触发,则在这里加载
+  if (!route.params.id) {
+    await loadVideoInfo();
+    await loadRelatedVideos();
+  }
 });
 });
 
 
 // 组件卸载时的清理工作已移至 VideoProcessor 组件
 // 组件卸载时的清理工作已移至 VideoProcessor 组件