如何在load more data in Vue中增加url编号

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="loadMore">Load More</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      pageNumber: 1
    };
  },
  methods: {
    loadMore() {
      this.pageNumber++; // 增加URL编号
      const url = `/api/data?page=${this.pageNumber}`; // 构建请求URL
      // 发送请求到后端接口，获取数据
      // 假设使用axios发送请求
      axios.get(url)
        .then(response => {
          const newData = response.data;
          this.dataList = this.dataList.concat(newData); // 将新数据追加到已有数据列表中
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>