vue SSR服务端渲染首屏就有分页怎么办呢

会遇到这样的情况，如果进来的第一个页面，就需要分页，那怎么办，因为首页连接中是没有任何参数的，asyncData上下文中拿到的query里面是空的，
这个问题首次遇到的时候，找不到好的处理方法，后来问了一下同时，解决了，
直接上代码吧 。自己脚手架创建一个项目，
在pages 的index 页面

<template>
  <div class="container">
     <div>
         <Card style="width:320px" v-for='(item,index) in listData' :key="index">
          <div style="text-align:center">
            <h3>{{item.title}}</h3>
          </div>
          </div>
       </Card> 
     </div>
    <!--自己找一个分页插件-->
    <Page :total="num" prev-text="Previous" @on-change="changePage" next-text="Next" />
  </div>
</template>
<script>
export default {
   data () { 
        return {
            num:null,
        }
     },
    watchQuery: true,
   async  asyncData({query, $axios}) {
     let  {pageNo} = query;
     //在asyncData 我们是拿不到data中的=定义的东西的，那我们就在内部定义一个 pageNo 然他默认为 1  下面的${pageNo||1}
     let  res = await $axios.get(`http://homeapi.source.91yunshi.com/article/articlePage?siteId=20&siteCode=20&moduleId=36&moduleCode=32-36&pageSize=5&pageNo=${pageNo||1}`); 
     console.log(res.data.page.total);
         //返回数据和总条数
     return {
             listData: res.data.data,
             num: res.data.page.total
       }
   },
  created () {
  
  },
  methods: {
  //跳转我们就让他跳转当前页， 此时asyncData的query中就有参数了
   changePage(e){
        this.$router.push({path:'/',query:{pageNo:e}})  
   }
  },

 mounted () {
 
    }
 
}
</script>

<style>

</style>