Building an E-Commerce Store - Browsing Products Chapter 10<ol :start="pagination.range.from + 1">
<li v-for="product in paginate(products)" v-if="product">
<h3>{{ product.title }}</h3>
</li>
</ol>
</div>`Updating the URL on navigation
Another improvement to the user experience would be to update the URL on page
navigation – this would allow the user to share the URL, bookmark it, and return to it later.
When paginating, the pages are a temporary state and should not be the main endpoint of a
URL. Instead, we can take advantage of the query parameters with Vue router.
Update the toPage method to add the parameter to the URL on page change. This can be
achieved using $router.push, however, we need to be careful not to remove any
existing parameters that may be in use for filtering in the future. This can be achieved by
combining the current query object from the route with a new one containing the page
variable:
toPage(page) {
this.$router.push({
query: Object.assign({}, this.$route.query, {
page
})
});this.currentPage = page;
},While navigating from page to page, you will notice the URL obtaining a new parameter of
?page= equal to the current page name. However, pressing refresh will not yield the
correct page results but, instead, page one again. This is because we need to pass the
current page query parameter to the currentPage variable on our HomePage component.