Vue laravel pagination and page refresh

I have a page which is loading 10 articles. I am going to render a VUE component on the page which which grabs the articles from an api call with pagination, and then renders the articles and pagination on the page.

I wanted to do it this way as I feel it offers a better user experience, rather than travelling to a new page.

Problem I am finding is that when users click on an article the hit the back button, as there is no url parameter (e.g. ?page=2) they end up right at the top of the pagination again.

Is there a way of updating the URL so that when users navigate away and back it will then pass the page number to the component and render that paginated data instead? Obviously this can only happen IF the user has clicked through to page 2+.

Thanks

jlrdw

5 years ago

Level 75

You have to get the state of the page.

See https://stackoverflow.com/questions/27987969/website-infinite-scrolling-return-scroll-position-after-user-go-back-in-brow

It's not your solution, but will explain more what needed. There is a little math involved.

Another discussion on back button:

https://laracasts.com/discuss/channels/vue/how-to-deal-with-the-back-button-in-vue

finlamit

5 years ago

Level 1

Thanks. I'll check that out.

Would you know by any chance the knock on effect for SEO using a method like this?

Thanks

Please or to participate in this conversation.