完成搜索页面结果分页

src/api/search/search.js

@@ -11,6 +11,6 @@ export function keywordSuggest(keyword) {
 }
 
 // 视频搜索
-export function videoQuery(keyword) {
-  return $axios.get(searchApi.videoSearchApi + '?keyword=' + keyword)
+export function videoQuery(keyword, page) {
+  return $axios.get(searchApi.videoSearchApi + '?keyword=' + keyword + '&page=' + page)
 }

src/layout/components/search-input.vue

@@ -75,14 +75,16 @@ export default {
         this.$router.push({
           path: '/search/result',
           query: {
-            keyword: this.text
+            keyword: this.text,
+            page: 1
           }
         })
       } else {
         const routeUrl = this.$router.resolve({
           path: '/search/result',
           query: {
-            keyword: this.text
+            keyword: this.text,
+            page: 1
           }
         })
         window.open(routeUrl.href, '_blank')

src/views/home/search-result.vue

@@ -23,6 +23,7 @@
         <v-pagination
           v-model="page"
           :length="length"
+          :total-visible="7"
           @input="pageChange"
         />
       </v-row>
@@ -41,23 +42,29 @@ export default {
   },
   data() {
     return {
-      videoList: [],
       page: 1,
-      size: 20,
-      length: 1
+      currentPage: 1,
+      size: 12,
+      length: 1,
+      videoList: []
     }
   },
   created() {
-    this.search(this.$route.query.keyword)
+    this.page = parseInt(this.$route.query.page)
+    this.search(this.$route.query.keyword, this.$route.query.page)
   },
   methods: {
-    search(keyword) {
-      videoQuery(keyword)
+    search(keyword, page) {
+      videoQuery(keyword, page)
         .then(res => {
           if (res.code === 0) {
-            for (const item of res.data) {
-              this.videoList.push(item)
-            }
+            const pageList = res.data
+            this.videoList = pageList.list
+            this.currentPage = pageList.currentPage
+            this.length = pageList.totalPages
+
+            // 页面跳转后滚动到页面顶部
+            this.$vuetify.goTo(0)
           } else {
             this.$notify({
               title: res.code,
@@ -66,10 +73,21 @@ export default {
               duration: 500
             })
           }
-        })
-        .catch(error => {
+        }).catch(error => {
           console.error(error.message)
         })
+    },
+    pageChange(page) {
+      if (page !== this.currentPage) {
+        this.currentPage = page
+        this.$router.push({
+          path: this.$route.path,
+          query: {
+            keyword: this.$route.query.keyword,
+            page: page
+          }
+        })
+      }
     }
   }
 }