export default[
{
    path:'/people?page=:page',
    component: ListPeople,
    name: 'people.paginate',
    meta:{
        title: 'Paginate'
    }
},
{
    path: '/people',
    component: ListPeople,
    name: 'people.list',
    meta: {
      title: 'People List',
    }
},

<template>
<div class="container">
    <h1>People List</h1>
    <vue-table v-bind="{data:people.data,columns}"></vue-table>

    <vue-pagination  :pagination="people"
                 @paginate="getPeople"
                 :offset="4">
    </vue-pagination>
</div>

<template>
  <!-- more codes here -->
<router-link class="page-link" :to="{ name:'people.paginate', params:{ page: page }}">{{ page }}</router-link>
  <!-- more codes here -->
</template>
<script>
 export default{
props: {
  pagination: {
      type: Object,
      required: true
  },
  offset: {
      type: Number,
      default: 4
  }
},
computed: {
  pagesNumber() {
    if (!this.pagination.to) {
      return [];
    }
    let from = this.pagination.current_page - this.offset;
    if (from < 1) {
      from = 1;
    }
    let to = from + (this.offset * 2);
    if (to >= this.pagination.last_page) {
      to = this.pagination.last_page;
    }
    let pagesArray = [];
    for (let page = from; page <= to; page++) {
      pagesArray.push(page);
    }
      return pagesArray;
  }
},
methods : {
  changePage(page) {
    this.pagination.current_page = page;
    this.$emit('paginate',page);
  }
}
 }
</script>