页面有刷新如何通过axios将异步请求的数据渲染到页面？

Question

最近在使用tp5+vue2做一个简单的博客，tp5提供数据接口，目前在做首页的分页，发现在做翻页的时候发现异步请求的数据随着页面的刷新而丢失，然后展现的还是第一个页面的内容。

首页(Index.vue)部分代码：

<template>
  <div>
    <!-- 这是其他代码 -->  
          <Pagination
            :currentPageProp="current_page"
            :lastPageProp="last_page"
            :totalProp="total"
            @prevNext="prevNext"
          ></Pagination>
  </div>
</template>
<script>
import FocusSlide from "@/components/FocusSlide";
// 分页组件
import Pagination from "@/components/Pagination";
import Sidebar from "@/components/Sidebar";
import { allBlog } from "@/request/api"; 
export default {
  name: "Index",
  data() {
    return {
   
      allBlog: [],
      total: 0, 
      initPageNum: 1, //初始页码
      current_page: 0, 
      last_page: 0
    };
  },
  components: {
    FocusSlide,
    Pagination,
    Sidebar
  },

  mounted() {
    allBlog({ page: this.initPageNum }).then(res => {
      this.allBlog = res.data; 
      this.total = res.total; 
      this.current_page = res.current_page;
      this.last_page = res.last_page;
    });
  },
  methods: {
    prevNext(pageNum) {
      console.log("prevNext:" + pageNum);
      allBlog({ page: pageNum }).then(res => {
        this.allBlog = res.data; //博客数据
        this.total = res.total; //总条数
        this.current_page = res.current_page;
        this.last_page = res.last_page;
      });
    }
  },
  watch: {
    allBlog(newVal, oldVal) {
      this.allBlog = newVal;
      console.log(" this.allBlog:");
      console.log(this.allBlog);
    },

    total(newVal, oldVal) {
      this.total = newVal;
      console.log(" this.total:" + this.total);
    },

    current_page(newVal, oldVal) {
      this.current_page = newVal;
      console.log(" this.current_page:" + this.current_page);
    },

    last_page(newVal, oldVal) {
      this.last_page = newVal;
      console.log(" this.last_page:" + this.last_page);
    }
  }
};
</script>

分页组件(Pagination.vue)

<template>
  <div class="pagination">
    <ul>
      <li class="prev-page" v-if="hasFirst">
        <a :href="'/page/'+prevPageNum" @click="prevPage()">上一页</a>
      </li>
      <li class="next-page" v-if="hasLast">
        <a :href="'/page/'+nextPageNum" @click="nextPage()">下一页</a>
      </li>
      <li>
        <span>共 {{lastPageData}} 页</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Pagination",
  props: {
    currentPageProp: {
      type: Number,
      required: true
    },
    lastPageProp: {
      type: Number,
      required: true
    },
    totalProp: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      currentPageData: 0,
      lastPageData: 0,
      totalData: 0
    };
  },
  watch: {
    currentPageProp(newVal, oldVal) {
      // console.log(newVal);
      this.currentPageData = newVal;
    },

    lastPageProp(newVal, oldVal) {
      // console.log(newVal);
      this.lastPageData = newVal;
    },

    totalProp(newVal, oldVal) {
      // console.log(newVal);
      this.totalData = newVal;
    }
  },

  methods: {
    prevPage() {
      this.$emit("prevNext", this.currentPageData - 1);
    },
    nextPage() {
      this.$emit("prevNext", this.currentPageData + 1);
    }
  },
  computed: {
    hasFirst() {
      if (this.currentPageData === 1) {
        return false;
      } else {
        return true;
      }
    },
    hasLast() {
      if (this.currentPageData === this.lastPageData) {
        return false;
      } else {
        return true;
      }
    },
    prevPageNum() {
      return this.currentPageData - 1;
    },
    nextPageNum() {
      return this.currentPageData + 1;
    }
  }

};
</script>

请求的数据接口是tp5提供：

127.0.0.1/api/page/页码

返回如下：

{
"host": "127.0.0.1",
"url": "/api/page/2",
"message": "请求成功",
"status": 200,
"total": 5,
"per_page": 2,
"current_page": 2,
"last_page": 3,
"data": [...]
}

路由配置：

  {
    path: "/",
    name: "Index",
    component: () => import("../views/Index.vue"),
  },

  {
    path: "/page/:id",
    name: "Index",
    component: () => import("../views/Index.vue"),
  },

total:是全部的数据，
per_page:是每页显示的数据，这里设置了每页显示2条
current_page:当前的页码
last_page:最后一页的页码。
数据库里面有5条数据，每页设置显示2条，一共显示3页。

首页显示正常，当点击翻页的【下一页】按钮的时候，希望渲染出第二页的内容。URL 虽然指向了 127.0.0.1/page/2，但是渲染的还是第一页的内容，感觉是因为点击按钮导致页面刷新而没保存。在不使用vuex的情况下应该怎么修改呢？

Answer 1

1. 监听的时候重新赋值是会死循环的。

       currentPageProp(newVal, oldVal) {
         // console.log(newVal);
         this.currentPageData = newVal;
       },

2. 我觉得你对页面的理解可能有一些偏差。并不是先请求接口之后跳转页面，而是跳转页面之后再去请求接口。我理解的prevNext方法只是把路由:id切换到一下，然后由mounted里获取页面pageNum去请求接口。

3. vue里data数据和执行的方法不能重名的。你的allBlog同时还是接口调用的方法。

    allBlog({ page: this.initPageNum }).then(res => {
         this.allBlog = res.data; 
         this.total = res.total; 
         this.current_page = res.current_page;
         this.last_page = res.last_page;
       });

Answer 2

点击翻页的时候有发起数据请求么？