fix: 分页参数丢失

2025-11-25 19:37:35 +08:00 · 2023-03-25 16:02:32 +08:00
parent decd628dc8
commit bca9227be1
35 changed files with 233 additions and 159 deletions
--- a/screenshots/main.png
+++ b/screenshots/main.png
--- a/src/api/song.js
+++ b/src/api/song.js
@@ -33,6 +33,7 @@ export const getMusicUrl = (id, level = "exhigh") => {
    params: {
      id,
      level,
+      time: new Date().getTime(),
    },
  });
 };
@@ -93,3 +94,20 @@ export const getSimiSong = (id) => {
    },
  });
 };
+
+/**
+ * 获取客户端歌曲下载
+ * @param {number} id - 要下载的音乐ID
+ * @param {number} br - 码率, 默认设置了 999000 即最大码率, 如果要 320k 则可设置为 320000, 其他类推
+ */
+export const getSongDownload = (id, br = 999000) => {
+  return axios({
+    method: "GET",
+    url: "/song/download/url",
+    params: {
+      id,
+      br,
+      time: new Date().getTime(),
+    },
+  });
+};
--- a/src/components/Banner/index.vue
+++ b/src/components/Banner/index.vue
@@ -67,7 +67,7 @@ const bannerJump = (type, id, url) => {
      break;
    case 1000:
      // 歌单页
-      router.push(`/playlist?id=${id}`);
+      router.push(`/playlist?id=${id}&page=1`);
      break;
    case 1004:
      // MV页
--- a/src/components/DataList/CoverLists.vue
+++ b/src/components/DataList/CoverLists.vue
@@ -306,6 +306,7 @@ const toLink = (id) => {
      path: "/playlist",
      query: {
        id,
+        page: 1,
      },
    });
  } else if (props.listType == "album") {
--- a/src/components/DataList/DataLists.vue
+++ b/src/components/DataList/DataLists.vue
@@ -174,13 +174,13 @@
              class="item"
              @click="
                () => {
-                  openAddToPlaylist(drawerData.id);
+                  addPlayListRef.openAddToPlaylist(drawerData.id);
                  drawerShow = false;
                }
              "
            >
              <n-icon size="20" :component="AddCircleRound" />
-              <n-text>收藏到歌单</n-text>
+              <n-text>添加到歌单</n-text>
            </div>
            <div
              class="item"
@@ -231,9 +231,7 @@
              class="item"
              @click="
                () => {
-                  cloudMatchValue.sid = drawerData.id;
-                  cloudMatchBeforeData = drawerData;
-                  cloudMatchModel = true;
+                  cloudMatchRef.openCloudMatch(drawerData);
                  drawerShow = false;
                }
              "
@@ -258,60 +256,7 @@
        </n-drawer-content>
      </n-drawer>
      <!-- 歌曲信息纠正 -->
-      <n-modal
-        class="s-model"
-        v-model:show="cloudMatchModel"
-        preset="card"
-        title="歌曲信息纠正"
-        :bordered="false"
-        :on-after-leave="closeCloudMatch"
-      >
-        <n-form class="cloud-match" :label-width="80" :model="cloudMatchValue">
-          <n-form-item label="原歌曲信息">
-            <n-card content-style="padding: 16px" :bordered="false" embedded>
-              <SmallSongData :songData="cloudMatchBeforeData" notJump />
-            </n-card>
-          </n-form-item>
-          <n-form-item label="匹配 ID" path="asid">
-            <n-input-number
-              v-model:value="cloudMatchValue.asid"
-              placeholder="请输入要匹配的歌曲 ID"
-              :show-button="false"
-            />
-            <n-button
-              style="margin-left: 12px"
-              :disabled="!cloudMatchValue.asid"
-              @click="cloudMatchId = cloudMatchValue.asid.toString()"
-            >
-              检查
-            </n-button>
-          </n-form-item>
-        </n-form>
-        <n-card
-          v-if="cloudMatchId"
-          content-style="padding: 16px"
-          :bordered="false"
-          embedded
-        >
-          <SmallSongData
-            ref="smallSongDataRef"
-            :getDataByID="cloudMatchId"
-            notJump
-          />
-        </n-card>
-        <template #footer>
-          <n-space justify="end">
-            <n-button @click="closeCloudMatch"> 取消 </n-button>
-            <n-button
-              type="primary"
-              @click="setCloudMatchBtn(cloudMatchValue)"
-              :disabled="!cloudMatchValue.asid"
-            >
-              纠正歌曲
-            </n-button>
-          </n-space>
-        </template>
-      </n-modal>
+      <CloudMatch ref="cloudMatchRef" />
      <!-- 收藏到歌单 -->
      <AddPlaylist ref="addPlayListRef" />
    </div>
@@ -337,9 +282,10 @@ import {
 } from "@vicons/material";
 import { musicStore, settingStore, userStore } from "@/store";
 import { useRouter } from "vue-router";
-import { setCloudDel, setCloudMatch } from "@/api/user";
+import { setCloudDel } from "@/api/user";
 import AllArtists from "./AllArtists.vue";
-import AddPlaylist from "./AddPlaylist.vue";
+import AddPlaylist from "@/components/DataModel/AddPlaylist.vue";
+import CloudMatch from "@/components/DataModel/CloudMatch.vue";
 import SmallSongData from "./SmallSongData.vue";

 const router = useRouter();
@@ -347,12 +293,10 @@ const music = musicStore();
 const setting = settingStore();
 const user = userStore();
 const addPlayListRef = ref(null);
-
-// 父组件方法
-const emit = defineEmits(["cloudDataLoad"]);
+const cloudMatchRef = ref(null);

 const props = defineProps({
-  // 表格数据
+  // 列表数据
  listData: {
    type: Object,
    default: [],
@@ -364,7 +308,7 @@ const props = defineProps({
  },
 });

-// 弹窗数据
+// 右键菜单数据
 const rightMenuX = ref(0);
 const rightMenuY = ref(0);
 const rightMenuShow = ref(false);
@@ -374,17 +318,6 @@ const rightMenuOptions = ref(null);
 const drawerShow = ref(false);
 const drawerData = ref(null);

-// 歌曲信息纠正数据
-const smallSongDataRef = ref(null);
-const cloudMatchModel = ref(false);
-const cloudMatchBeforeData = ref(null);
-const cloudMatchId = ref(null);
-const cloudMatchValue = ref({
-  uid: user.getUserData.userId,
-  sid: null,
-  asid: null,
-});
-
 // 复制歌曲链接或ID
 const copySongData = (id, url = true) => {
  if (navigator.clipboard) {
@@ -476,9 +409,7 @@ const openRightMenu = (e, data) => {
        show: router.currentRoute.value.name == "cloud" ? true : false,
        props: {
          onClick: () => {
-            cloudMatchValue.value.sid = data.id;
-            cloudMatchBeforeData.value = data;
-            cloudMatchModel.value = true;
+            cloudMatchRef.value.openCloudMatch(data);
          },
        },
      },
@@ -491,7 +422,13 @@ const openRightMenu = (e, data) => {
        label: "同名搜索",
        props: {
          onClick: () => {
-            router.push(`/search/songs?keywords=${data.name}`);
+            router.push({
+              path: "/search/songs",
+              query: {
+                keywords: data.name,
+                page: 1,
+              },
+            });
          },
        },
      },
@@ -557,38 +494,6 @@ const delCloudSong = (data) => {
  });
 };

-// 歌曲纠正
-const setCloudMatchBtn = (data) => {
-  if (data.sid == data.asid) {
-    $message.error("与原歌曲 ID 一致，无需纠正");
-  } else {
-    if (!smallSongDataRef.value) {
-      $message.error("请先检查");
-    } else if (smallSongDataRef.value.checkSongData()) {
-      setCloudMatch(data.uid, data.sid, data.asid).then((res) => {
-        console.log(res);
-        if (res.data) {
-          closeCloudMatch();
-          $message.success("歌曲纠正成功");
-          emit("cloudDataLoad");
-        } else {
-          $message.error("歌曲纠正失败，请重试");
-        }
-      });
-    } else {
-      $message.error("非正常歌曲 ID，无法匹配");
-    }
-  }
-};
-
-// 关闭歌曲纠正
-const closeCloudMatch = () => {
-  cloudMatchBeforeData.value = null;
-  cloudMatchId.value = null;
-  cloudMatchValue.value.asid = null;
-  cloudMatchModel.value = false;
-};
-
 // 开启抽屉
 const openDrawer = (data) => {
  console.log(data);
@@ -828,9 +733,4 @@ const jumpLink = (id, type) => {
    }
  }
 }
-.cloud-match {
-  :deep(.n-input-number) {
-    width: 100%;
-  }
-}
 </style>
--- a/src/components/DataModel/AddPlaylist.vue
+++ b/src/components/DataModel/AddPlaylist.vue
@@ -3,7 +3,7 @@
    class="add-playlist s-model"
    v-model:show="addToPlaylistModel"
    preset="card"
-    title="收藏到歌单"
+    title="添加到歌单"
    :bordered="false"
    :on-after-leave="closeAddToPlaylist"
  >
@@ -49,7 +49,7 @@ const addToPlayList = (pid, tracks) => {
  addSongToPlayList(pid, tracks).then((res) => {
    console.log(res);
    if (res.status === 200) {
-      $message.success("收藏歌曲至歌单成功");
+      $message.success("添加歌曲至歌单成功");
      closeAddToPlaylist();
      music.setUserPlayLists();
    } else {
--- a/src/components/DataModel/CloudMatch.vue
+++ b/src/components/DataModel/CloudMatch.vue
@@ -0,0 +1,128 @@
+<template>
+  <n-modal
+    class="s-model"
+    v-model:show="cloudMatchModel"
+    preset="card"
+    title="歌曲信息纠正"
+    :bordered="false"
+    :on-after-leave="closeCloudMatch"
+  >
+    <n-form class="cloud-match" :label-width="80" :model="cloudMatchValue">
+      <n-form-item label="原歌曲信息">
+        <n-card content-style="padding: 16px" :bordered="false" embedded>
+          <SmallSongData :songData="cloudMatchBeforeData" notJump />
+        </n-card>
+      </n-form-item>
+      <n-form-item label="匹配 ID" path="asid">
+        <n-input-number
+          v-model:value="cloudMatchValue.asid"
+          placeholder="请输入要匹配的歌曲 ID"
+          :show-button="false"
+        />
+        <n-button
+          style="margin-left: 12px"
+          :disabled="!cloudMatchValue.asid"
+          @click="cloudMatchId = cloudMatchValue.asid.toString()"
+        >
+          检查
+        </n-button>
+      </n-form-item>
+    </n-form>
+    <n-card
+      v-if="cloudMatchId"
+      content-style="padding: 16px"
+      :bordered="false"
+      embedded
+    >
+      <SmallSongData
+        ref="smallSongDataRef"
+        :getDataByID="cloudMatchId"
+        notJump
+      />
+    </n-card>
+    <template #footer>
+      <n-space justify="end">
+        <n-button @click="closeCloudMatch"> 取消 </n-button>
+        <n-button
+          type="primary"
+          @click="setCloudMatchBtn(cloudMatchValue)"
+          :disabled="!cloudMatchValue.asid"
+        >
+          纠正歌曲
+        </n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>
+
+<script setup>
+import { setCloudMatch } from "@/api/user";
+import { userStore } from "@/store";
+import SmallSongData from "@/components/DataList/SmallSongData.vue";
+
+const user = userStore();
+
+// 歌曲信息纠正数据
+const cloudDataLoad = inject("cloudDataLoad", null);
+const smallSongDataRef = ref(null);
+const cloudMatchModel = ref(false);
+const cloudMatchBeforeData = ref(null);
+const cloudMatchId = ref(null);
+const cloudMatchValue = ref({
+  uid: user.getUserData.userId,
+  sid: null,
+  asid: null,
+});
+
+// 歌曲纠正
+const setCloudMatchBtn = (data) => {
+  if (data.sid == data.asid) {
+    $message.error("与原歌曲 ID 一致，无需纠正");
+  } else {
+    if (!smallSongDataRef.value) {
+      $message.error("请先检查");
+    } else if (smallSongDataRef.value.checkSongData()) {
+      setCloudMatch(data.uid, data.sid, data.asid).then((res) => {
+        console.log(res);
+        if (res.data) {
+          closeCloudMatch();
+          $message.success("歌曲纠正成功");
+          cloudDataLoad();
+        } else {
+          $message.error("歌曲纠正失败，请重试");
+        }
+      });
+    } else {
+      $message.error("非正常歌曲 ID，无法匹配");
+    }
+  }
+};
+
+// 开启歌曲纠正
+const openCloudMatch = (data) => {
+  cloudMatchValue.value.sid = data.id;
+  cloudMatchBeforeData.value = data;
+  cloudMatchModel.value = true;
+};
+
+// 关闭歌曲纠正
+const closeCloudMatch = () => {
+  cloudMatchBeforeData.value = null;
+  cloudMatchId.value = null;
+  cloudMatchValue.value.asid = null;
+  cloudMatchModel.value = false;
+};
+
+// 暴露方法
+defineExpose({
+  openCloudMatch,
+});
+</script>
+
+<style lang="scss" scoped>
+.cloud-match {
+  :deep(.n-input-number) {
+    width: 100%;
+  }
+}
+</style>
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -85,6 +85,12 @@ watch(
    pageNumberChange(val);
  }
 );
+watch(
+  () => props.pageNumber,
+  (val) => {
+    currentPageNumber.value = val;
+  }
+);

 onMounted(() => {
  // 更改当前页数
--- a/src/components/Personalized/PaAlbum.vue
+++ b/src/components/Personalized/PaAlbum.vue
@@ -2,7 +2,7 @@
  <div class="paalbum">
    <n-h3 class="title" prefix="bar">
      新碟上架
-      <span class="more" @click="router.push('/new-album')">更多</span>
+      <span class="more" @click="router.push('/new-album?page=1')">更多</span>
    </n-h3>
    <CoverLists
      listType="album"
--- a/src/components/Personalized/PaArtists.vue
+++ b/src/components/Personalized/PaArtists.vue
@@ -14,7 +14,9 @@
        <n-tab :name="8"> 日本 </n-tab>
        <n-tab :name="16"> 韩国 </n-tab>
      </n-tabs>
-      <span class="more" @click="router.push('/discover/artists')">更多</span>
+      <span class="more" @click="router.push('/discover/artists?page=1')">
+        更多
+      </span>
    </n-h3>
    <ArtistLists :listData="artistsData" :gridCollapsed="true" />
  </div>
--- a/src/components/Personalized/PaPlayLists.vue
+++ b/src/components/Personalized/PaPlayLists.vue
@@ -2,7 +2,9 @@
  <div class="paplaylists">
    <n-h3 class="title" prefix="bar">
      推荐歌单
-      <span class="more" @click="router.push('/discover/playlists')">更多</span>
+      <span class="more" @click="router.push('/discover/playlists?page=1')">
+        更多
+      </span>
    </n-h3>
    <CoverLists
      :listData="personalizedData"
--- a/src/components/Player/BigPlayer.vue
+++ b/src/components/Player/BigPlayer.vue
@@ -1,7 +1,7 @@
 <template>
  <Transition name="up">
    <div
-      v-show="music.showBigPlayer"
+      v-if="music.showBigPlayer"
      class="bplayer"
      :style="
        music.getPlaySongData
--- a/src/components/Player/index.vue
+++ b/src/components/Player/index.vue
@@ -219,7 +219,7 @@ import { PlayCycle, PlayOnce, ShuffleOne } from "@icon-park/vue-next";
 import { storeToRefs } from "pinia";
 import { musicStore, settingStore } from "@/store";
 import { useRouter } from "vue-router";
-import AddPlaylist from "@/components/DataList/AddPlaylist.vue";
+import AddPlaylist from "@/components/DataModel/AddPlaylist.vue";
 import AllArtists from "@/components/DataList/AllArtists.vue";
 import PlayList from "@/components/DataList/PlayList.vue";
 import BigPlayer from "./BigPlayer.vue";
--- a/src/components/SearchInp/index.vue
+++ b/src/components/SearchInp/index.vue
@@ -225,7 +225,13 @@ const toSearch = (val, type) => {
      inputValue.value = val;
      // 写入搜索历史
      music.setSearchHistory(inputValue.value.trim());
-      router.push(`/search/songs?keywords=${val}`);
+      router.push({
+        path: "/search/songs",
+        query: {
+          keywords: val,
+          page: 1,
+        },
+      });
      break;
    case 1:
      // 歌曲页
--- a/src/style/global.scss
+++ b/src/style/global.scss
@@ -21,12 +21,12 @@ body,

  .n-dialog__title {
    transform: translateX(-8px);
-    font-size: 16px;
-    font-weight: bold;
+    font-size: 18px;
+    // font-weight: bold;

    i {
      font-size: 24px;
-      transform: translateY(-1px);
+      // transform: translateY(-1px);
    }
  }
 }
@@ -38,7 +38,8 @@ body,
  min-width: min(24rem, 100vw);
  .n-card-header {
    .n-card-header__main {
-      font-weight: bold;
+      // font-weight: bold;
+      font-size: 18px;
    }
  }
  .n-scrollbar {
--- a/src/views/Artist/albums.vue
+++ b/src/views/Artist/albums.vue
@@ -90,7 +90,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    artistId.value = val.query.id;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "ar-albums") {
      getArtistAblumsData(
        artistId.value,
--- a/src/views/Artist/all-songs.vue
+++ b/src/views/Artist/all-songs.vue
@@ -93,7 +93,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    artistId.value = val.query.id;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "all-songs") {
      getArtistAllSongsData(
        artistId.value,
--- a/src/views/Artist/index.vue
+++ b/src/views/Artist/index.vue
@@ -107,6 +107,7 @@ const tabChange = (value) => {
    path: `/artist/${value}`,
    query: {
      id: artistId.value,
+      page: 1,
    },
  });
 };
--- a/src/views/Artist/songs.vue
+++ b/src/views/Artist/songs.vue
@@ -8,7 +8,7 @@
        strong
        secondary
        round
-        @click="router.push(`/all-songs?id=${artistId}`)"
+        @click="router.push(`/all-songs?id=${artistId}&page=1`)"
      >
        全部歌曲
      </n-button>
--- a/src/views/Artist/videos.vue
+++ b/src/views/Artist/videos.vue
@@ -99,7 +99,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    artistId.value = val.query.id;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "ar-videos") {
      getArtistVideosData(
        artistId.value,
--- a/src/views/Comment/CommentView.vue
+++ b/src/views/Comment/CommentView.vue
@@ -3,7 +3,7 @@
    <n-card
      class="goback"
      v-if="music.getPlaySongData && music.getPlaySongData.id != songId"
-      @click="router.push(`/comment?id=${music.getPlaySongData.id}`)"
+      @click="router.push(`/comment?id=${music.getPlaySongData.id}&page=1`)"
      content-style="padding: 6px"
      >前往当前歌曲评论
    </n-card>
@@ -140,9 +140,7 @@ onMounted(() => {
 watch(
  () => router.currentRoute.value,
  (val) => {
-    val.query.page
-      ? (pageNumber.value = Number(val.query.page))
-      : (pageNumber.value = 1);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "comment") {
      songId.value = val.query.id;
      getCommentData(val.query.id, (pageNumber.value - 1) * 20);
--- a/src/views/Discover/artists.vue
+++ b/src/views/Discover/artists.vue
@@ -145,6 +145,7 @@ const artistInitialChange = (key) => {
    query: {
      type: artistTypeNamesChoose.value,
      initial: key,
+      page: 1,
    },
  });
 };
@@ -157,6 +158,7 @@ const artistTypeChange = (index) => {
    query: {
      type: index,
      initial: artistInitialChoose.value,
+      page: 1,
    },
  });
 };
@@ -179,8 +181,10 @@ const loadingMore = () => {
 watch(
  () => router.currentRoute.value,
  (val) => {
-    artistTypeNamesChoose.value = Number(val.query.type);
-    artistInitialChoose.value = val.query.initial;
+    artistTypeNamesChoose.value = Number(val.query.type ? val.query.type : 0);
+    artistInitialChoose.value = val.query.initial
+      ? val.query.initial
+      : artistInitials[0].key;
    artistsOffset.value = 0;
    if (val.name == "dsc-artists") {
      getArtistListData(
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -36,6 +36,7 @@ const tabChange = (value) => {
  console.log(value);
  router.push({
    path: `/discover/${value}`,
+    page: 1,
  });
 };

--- a/src/views/Discover/playlists.vue
+++ b/src/views/Discover/playlists.vue
@@ -181,6 +181,7 @@ const hqPLayListChange = (val) => {
    query: {
      cat: catName.value,
      hq: val ? true : false,
+      page: 1,
    },
  });
 };
@@ -290,7 +291,7 @@ const pageNumberChange = (val) => {
 watch(
  () => router.currentRoute.value,
  (val) => {
-    catName.value = val.query.cat;
+    catName.value = val.query.cat ? val.query.cat : "全部歌单";
    hqPLayListOpen.value = val.query.hq
      ? val.query.hq == "true"
        ? true
--- a/src/views/Discover/toplists.vue
+++ b/src/views/Discover/toplists.vue
@@ -19,7 +19,7 @@
              alignItems: 'center',
            }"
            hoverable
-            @click="router.push(`/playlist?id=${item.id}`)"
+            @click="router.push(`/playlist?id=${item.id}&page=1`)"
          >
            <div class="cover">
              <n-avatar
--- a/src/views/NewAlbum/NewAlbumView.vue
+++ b/src/views/NewAlbum/NewAlbumView.vue
@@ -104,7 +104,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    albumAreaChoose.value = val.query.area;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "new-album") {
      getAlbumNewData(
        albumAreaChoose.value,
--- a/src/views/PlayList/PlayListView.vue
+++ b/src/views/PlayList/PlayListView.vue
@@ -50,7 +50,7 @@
          :bordered="false"
          v-for="item in playListDetail.tags"
          :key="item"
-          @click="router.push(`/discover/playlists?cat=${item}`)"
+          @click="router.push(`/discover/playlists?cat=${item}&page=1`)"
        >
          {{ item }}
        </n-tag>
@@ -223,7 +223,7 @@ watch(
  () => router.currentRoute.value,
  (val, oldVal) => {
    playListId.value = val.query.id;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "playlist") {
      if (val.query.id != oldVal.query.id) {
        getPlayListDetailData(playListId.value);
--- a/src/views/Search/albums.vue
+++ b/src/views/Search/albums.vue
@@ -61,7 +61,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    searchKeywords.value = val.query.keywords;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "s-albums") {
      getSearchDataList(
        searchKeywords.value,
--- a/src/views/Search/index.vue
+++ b/src/views/Search/index.vue
@@ -67,6 +67,7 @@ const tabChange = (value) => {
    path: `/search/${value}`,
    query: {
      keywords: searchKeywords.value,
+      page: 1,
    },
  });
 };
--- a/src/views/Search/playlists.vue
+++ b/src/views/Search/playlists.vue
@@ -61,7 +61,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    searchKeywords.value = val.query.keywords;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "s-playlists") {
      getSearchDataList(
        searchKeywords.value,
--- a/src/views/Search/songs.vue
+++ b/src/views/Search/songs.vue
@@ -71,7 +71,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    searchKeywords.value = val.query.keywords;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "s-songs") {
      getSearchDataList(
        searchKeywords.value,
--- a/src/views/Search/videos.vue
+++ b/src/views/Search/videos.vue
@@ -62,7 +62,7 @@ watch(
  () => router.currentRoute.value,
  (val) => {
    searchKeywords.value = val.query.keywords;
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "s-videos") {
      getSearchDataList(
        searchKeywords.value,
--- a/src/views/Song/SongView.vue
+++ b/src/views/Song/SongView.vue
@@ -57,7 +57,7 @@
          <n-button
            strong
            secondary
-            @click="router.push(`/comment?id=${musicDetail.id}`)"
+            @click="router.push(`/comment?id=${musicDetail.id}&page=1`)"
          >
            <template #icon>
              <n-icon :component="MessageFilled" />
--- a/src/views/User/cloud.vue
+++ b/src/views/User/cloud.vue
@@ -33,7 +33,7 @@
        <span>{{ cloudSpace[1] }} G</span>
      </div>
    </div>
-    <DataLists :listData="cloudData" @cloudDataLoad="cloudDataLoad" />
+    <DataLists :listData="cloudData" />
    <Pagination
      :totalCount="totalCount"
      :pageNumber="pageNumber"
@@ -151,14 +151,15 @@ const cloudDataLoad = (scroll = false) => {
    scroll
  );
 };
+provide("cloudDataLoad", cloudDataLoad);

 // 监听路由参数变化
 watch(
  () => router.currentRoute.value,
  (val) => {
-    pageNumber.value = Number(val.query.page);
+    pageNumber.value = Number(val.query.page ? val.query.page : 1);
    if (val.name == "cloud") {
-      getCloudData(pagelimit.value, (val.query.page - 1) * pagelimit.value);
+      getCloudData(pagelimit.value, (pageNumber.value - 1) * pagelimit.value);
    }
  }
 );
--- a/src/views/User/index.vue
+++ b/src/views/User/index.vue
@@ -42,6 +42,9 @@ const tabChange = (value) => {
  console.log(value);
  router.push({
    path: `/user/${value}`,
+    query: {
+      page: 1,
+    },
  });
 };