Stay on same page after browser refresh.

[totsteps]

I am having a hard time figuring out how to stay on the same page after a page refresh.

Let's say I have 4 pages for the /posts route. When I browse the /posts route the first time it fetches the first page. Now I click on page 3 and it fetches the 3rd page. Now I refresh the browser and it should again fetch the 3rd page, but instead, it fetches the first page and the first page gets active on the pagination component!!

Is there a way to tell the component to pass the selected page number to the click-handler even after the browser window is refreshed?

Here's how I am using the component:

<div v-if="totalPages > 1">
      <paginate
        :page-count="totalPages"
        :margin-pages="4"
        :page-range="4"
        :containerClass="'pagination'"
        :pageClass="'page-item'"
        :pageLinkClass="'page-link-item'"
        :prevClass="'prev-item'"
        :prevLinkClass="'prev-link-item'"
        :nextClass="'next-item'"
        :nextLinkClass="'next-link-item'"
        :breakViewClass="'break-view'"
        :breakViewLinkClass="'break-view-link'"
        :clickHandler="getPosts"
      >
        <span slot="breakViewContent">
          <svg width="16" height="4" viewBox="0 0 16 4">
            <circle fill="#999999" cx="2" cy="2" r="2" />
            <circle fill="#999999" cx="8" cy="2" r="2" />
            <circle fill="#999999" cx="14" cy="2" r="2" />
          </svg>
        </span>
      </paginate>
    </div>

Handler:

getPosts(page) {
  // fetch requested page.
},

Thanks.

[lokyoung]

@gagan0723 Have you save the page number in url or anywhere else? For your scenario, I think the page number should be get from the url after refresh. eg. /posts/3 for the third page. After refresh, you can still get the page number from the url. You can set the number to the component.

[totsteps]

@lokyoung thanks for the reply.

I think the page number should be get from the url after refresh.

I tried that before but it didn't work out. Doing so does get the actual response from the backend(for example /posts/3 gets the data for page 3) but the page jumps back to the first page and an additional request is made to the backend for the first page.

[lokyoung]

@gagan0723 After the refresh, you can get the page number from the router. And you should send the page number to the pagination component by v-model. And you should fetch the third page by yourself.