Problems with pagination when building a SPA with vuejs using vue-router

You could put a watcher on this.$route.params.page and then fetch new topics when the value changes:

created() {
    this.fetchTopics()
},
methods: {
    fetchTopics() {
        // current code to fetch your topics
    }
},
watch: {
    '$route.params.id': 'fetchTopics'
}

Your API call however doesn't seem to take in account the current page.

@jurjen your watcher it doesn't work.

@anhnd I've updated the code.

It still doesn't work

Can't really tell what goes wrong if you don't share any code. Does the fetchTopics method get triggered when you change the route id param?

@jurjen I didn't change the id paramater. I only change the page query to paginate data per page.

I found a way to make it work but i don't know whether it is optimize

<template>
    <div class="category-view">
        <topic
                v-for="topic in topics"
                :topic="topic">
        </topic>

        <div class="Pagination">
            
            <a class="Page-link Page-link--prev"
                v-if="page > 1"
                @click="fetchTopics(page - 1)"
            >Back</a>

            <a class="Page-link Page-link--next"
                v-if="page < lastPage"
               @click="fetchTopics(page + 1)"
            >Next</a>
            
        </div>

    </div>
</template>

<script>
import Topic from './Topic.vue';
export default {
  components: { Topic },

  data () {
    return {
      topics: [],
      categoryId: 0,
      page: 1,
      lastPage: 1
    }
  },

 created(){

       this.fetchTopics();
 },

 methods:{

    fetchTopics(currentPage = 1){
        this.categoryId = this.$route.params.categoryId;

        axios.get('/api/categories/'+ this.categoryId +'/topics?page=' + currentPage)
             .then(response => {
                this.page = currentPage || 1;
                this.topics = response.data.data;
                this.lastPage = response.data.last_page;
             })
             .catch(error => {
                 console.log("Error..." + error.response)
              });
    }
 }
}

</script>

And this is the second solution: For someone that want to trigger the : 'fetchTopics' method when the route query change.

<template>
    <div class="category-view">
        <topic
                v-for="topic in topics"
                :topic="topic">
        </topic>

        <div class="Pagination">
            <router-link class="Page-link Page-link--prev"
                         v-if="page > 1"
                         :to="{name: 'category', params: {categoryId: categoryId}, query:{page: page - 1}}"
            >Back</router-link>

            <router-link class="Page-link Page-link--next"
                         v-if="page < lastPage"
                         :to="{name: 'category', params: {categoryId: categoryId}, query:{page: page + 1}}"
            >Next</router-link>

        </div>

    </div>
</template>

<script>
import Topic from './Topic.vue';
export default {
  components: { Topic },

  data () {
    return {
      topics: [],
      categoryId: 0,
      page: 1,
      lastPage: 1
    }
  },

 created(){
       this.fetchTopics();
 },

 methods:{

    fetchTopics(){

        this.categoryId = this.$route.params.categoryId;
        let _page = this.$route.query.page || 1;

        axios.get('/api/categories/'+ this.categoryId +'/topics', {params:{ page: _page}})
             .then(response => {
                this.page = _page;
                this.topics = response.data.data;
                this.lastPage = response.data.last_page;
             })
             .catch(error => {
                 console.log("Error..." + error.response.data)
              });
    }
 },

 watch: {
    '$route' (to, from) {
      // react to route changes...
      this.fetchTopics();
    }
  }
}
</script>