How to implement paging query in Bootstrap4 + Vue2

<p class="row">

   <table class="table table-hover table-striped table-bordered table-sm">

    <thead class="">

    <tr>

     <th><input type="checkbox"></th>

     <th>序号</th>

     <th>会员号</th>

     <th>姓名</th>

     <th>手机号</th>

     <th>办公电话</th>

     <th>邮箱地址</th>

     <th>状态</th>

    </tr>

    </thead>

    <tbody>

    <tr v-for="(user,index) in userList">

     <td><input type="checkbox" :value="index" v-model="checkedRows"></td>

     <td>{{pageNow*10 + index+1}}</td>

     <td>{{user.id}}</td>

     <td>{{user.username}}</td>

     <td>{{user.mobile}}</td>

     <td>{{user.officetel}}</td>

     <td>{{user.email}}</td>

     <td v-if="user.disenable == 0">正常</td>

     <td v-else>注销</td>

    </tr>

    </tbody>

   </table>

  </p>

<p class="row mx-auto">

   <ul class="nav justify-content-center pagination-sm">

    <li class="page-item">

     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-backward" @click="switchToPage(0)"> </i></a>

    </li>

    <li class="page-item">

     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-backward" @click="switchToPage(pageNow-1)"></i></a>

    </li>

    <li class="page-item" v-for="n in totalPages" :class="{active:n==pageNow+1}">

     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="switchToPage(n-1)" class="page-link">{{n}}</a>

    </li>

    <li class="page-item">

     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-forward" @click="switchToPage(pageNow+1)"></i></a>

    </li>

    <li class="page-item">

     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-forward" @click="switchToPage(totalPages-1)"></i></a>

    </li>

   </ul>

  </p>

var vueApp = new Vue({

  el:"#vueApp",

  data:{

   userList:[],

   perPage:10,

   pageNow:0,

   totalPages:0,

   checkedRows:[]

  },

  methods:{

   switchToPage:function (pageNo) {

    if (pageNo < 0 || pageNo >= this.totalPages){

     return false;

    }

    getUserByPage(pageNo);

   }

  }

 });

function getUserByPage(pageNow) {

 $.ajax({

  url:"/user/"+pageNow,

  success:function (datas) {

  vueApp.userList = datas.content;

  vueApp.totalPages = datas.totalPages;

  vueApp.pageNow = pageNow;

  },

  error:function (res) {

  console.log(res);

  }

 });

 }

<script>

 var vueApp = new Vue({

 el:"#vueApp",

 data:{

  userList:[],

  perPage:10,

  pageNow:0,

  totalPages:0,

  checkedRows:[]

 },

 methods:{

  switchToPage:function (pageNo) {

  if (pageNo < 0 || pageNo >= this.totalPages){

   return false;

  }

  getUserByPage(pageNo);

  }

 }

 });

 getUserByPage(0);

 function getUserByPage(pageNow) {

 $.ajax({

  url:"/user/"+pageNow,

  success:function (datas) {

  vueApp.userList = datas.content;

  vueApp.totalPages = datas.totalPages;

  vueApp.pageNow = pageNow;

  },

  error:function (res) {

  console.log(res);

  }

 });

 }

</script>

/**

 * 用户相关请求控制器

 * @author louie

 * @date 2017-12-19

 */

@RestController

@RequestMapping("/user")

public class UserController {

 @Autowired

 private UserService userService;

 /**

 * 分页获取用户

 * @param pageNow 当前页码

 * @return 分页用户数据

 */

 @RequestMapping("/{pageNow}")

 public Page<User> findByPage(@PathVariable Integer pageNow){

 return userService.findUserPaging(pageNow);

 }

}

@Service

public class UserServiceImpl implements UserService {

 @Value("${self.louie.per-page}")

 private Integer perPage;

 @Autowired

 private UserRepository userRepository;

 @Override

 public Page<User> findUserPaging(Integer pageNow) {

 Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id");

 return userRepository.findAll(pageable);

 }

}