Bootstrap-vue pagination nav not working as in the tutorial (refreshes when a page is clicked)

Question

I implemented pagination for the gallery on my website following this tutorial. Problem is that unlike the pagination on the website linked above, my webpage refreshes after a new page number is clicked. That is not what I want to happen.

I want the webpage to stay in the same position, the same way it is on the tutorial. Here is a fiddleJS of how my gallery looks. Unfortunately, since the new pages lead to new URLs and the page refreshes, it leads to а 404 error on fiddleJS but I think it is sufficient to get the idea of what I have done so far.

Code from the 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>

Reading the tutorial, what I thought I should do is add use-router to the tag, however, the addition of it did not change anything.

score 0 · Answer 1 · answered Sep 10 '19 at 05:18

0

Try this :::

methods: {
        linkGen(pageNum) {
          return pageNum;
        }
      }

https://jsfiddle.net/np62xjrq/

answered Sep 10 '19 at 05:18

Mariselvam

149
4

That prevents refreshing of the page, however, the URL address does not get updated after clicking a page. – firsttimeoncomputer Sep 10 '19 at 05:27

score 0 · Answer 2 · answered Sep 10 '19 at 15:57

0

Make sure your linkGen function returns the full URL path, or return a vue-router location object (assuming you want to use a query string in the URL to change page):

linkGen(page) {
  return {
    query {
     page: page
    }
  }
}

answered Sep 10 '19 at 15:57

Troy Morehouse

5,320
1
27
38

Bootstrap-vue pagination nav not working as in the tutorial (refreshes when a page is clicked)

2 Answers2