Bootstrap-vue 分页导航不像教程中那样工作（单击页面时刷新）

Posted 2023-02-22

【中文标题】Bootstrap-vue 分页导航不像教程中那样工作（单击页面时刷新）

【英文标题】：Bootstrap-vue pagination nav not working as in the tutorial (refreshes when a page is clicked)

【发布时间】：2020-01-11 19:55:27

【问题描述】：

我按照tutorial 在我的网站上为画廊实现了分页。问题是，与上面链接的网站上的分页不同，我的网页在单击新页码后会刷新。这不是我想要发生的。

我希望网页保持在相同的位置，就像在教程中一样。这是我的画廊外观的fiddleJS。不幸的是，由于新页面会导致新的 URL 和页面刷新，它会导致 fiddleJS 出现 404 错误，但我认为这足以了解我到目前为止所做的事情。

来自 fiddleJS 的代码：

<div class="container text-center" id="app">
    <h1 class = "mb-3">Gallery</h1>
    <div class="img-gallery">
        <div v-show="currentPage == 1" class="row">
      <img src="https://www.gstatic.com/webp/gallery/1.jpg" class="w-25">
        </div>
        <div v-show="currentPage == 2" class="row">
      <img src="https://www.gstatic.com/webp/gallery/1.jpg" class="w-25">
      <img src="https://www.gstatic.com/webp/gallery/1.jpg" class="w-25">
        </div>
        <div v-show="currentPage == 3" class="row">
      <img src="https://www.gstatic.com/webp/gallery/1.jpg" class="w-25">
      <img src="https://www.gstatic.com/webp/gallery/1.jpg" class="w-25">
      <img src="https://www.gstatic.com/webp/gallery/1.jpg" class="w-25">
        </div>
    </div>
    <div class="mt-2 mt-sm-3 d-flex justify-content-center">
        <b-pagination-nav 
            v-model="currentPage"
            :link-gen="linkGen" 
            :number-of-pages=3 
            limit=7 
            use-router>
        </b-pagination-nav>
    </div>
</div><!-- container -->
<script>
    new Vue(
      el: '#app',
      data: 
          currentPage: ''
      ,
      methods: 
        linkGen(pageNum) 
          return `$pageNum`
        
      
    )
</script>

阅读教程，我认为我应该做的是将 use-router 添加到标签中，但是添加它并没有改变任何东西。

【参考方案1】：

试试这个 :::

methods: 
        linkGen(pageNum) 
          return pageNum;
        
      

https://jsfiddle.net/np62xjrq/

【讨论】：

这会阻止页面刷新，但是，单击页面后URL地址不会更新。

【参考方案2】：

确保您的 linkGen 函数返回完整的 URL 路径，或者返回一个 vue-router location 对象（假设您想在 URL 中使用查询字符串来更改页面）：

linkGen(page) 
  return 
    query 
     page: page