Add query parameters to the route in Aurelia - aurelia

Question

I have a paginated API that looks like http://127.0.0.1:8000/api/articles/?page=2 and I want to use the same pagination on the front end in Aurelia.
I created two buttons for the next and previous pages:
<button
type="button"
click.delegate="getArticles(articles.previous)">prev</button>
<button
type="button"
click.delegate="getArticles(articles.next)">next</button>
When I click next there is a new GET request and the articles list get updated but I also want to add the parameters on the URL so the user can see he's on the second page.
So, how can I add /?page=2 to the end of the route.
I know how to add parameters using a different component as the child but this time I'm using the same component.
Thank you.

Answer 1

Aurelia supports query parameters in routes out of the box. You don't need to do define page parameter in the route itself. All query parameters are just given to the params parameter of activate method.
import { inject } from 'aurelia-framework';
import { Router, activationStrategy } from 'aurelia-router';
#inject(Router)
export class Articles(Router) {
constructor(router) {
this.router = router;
}
activate(params) {
this.page = parseInt(params.page || '1');
// TODO: Load your articles from the API here
// this.articles = <fetch call using this.page>
}
// This is necessary to tell Aurelia router not to reuse
// the same view model whenever navigating between pages
// so that the activate method gets called each time
determineActivationStrategy() {
return activationStrategy.replace;
}
// TODO: Check if we can go to previous and next page, etc.
nextPage() {
this.router.navigateToRoute('articles', { page: this.page + 1 });
}
previousPage() {
this.router.navigateToRoute('articles', { page: this.page - 1 });
}
}