Aurelia-Router: Modify route params and address bar from VM with Router

Question

I want update the url-params in the address bar without routing. But i'm not sure how to do this with Aurelia-router from a view-model.

In my case I send IDs in the url which gets picked up by the view-model's activate-method.

The route looks like this: http://localhost:3000/#/test/products?0=2599037842&1=2599080552

Then I want to be able to remove IDs from the url without reactivating the view-model, url result exemple: http://localhost:3000/#/test/products?0=2599037842

Hopefully there is support for this in Aurelia-router

Thanks! /Mike

Answer 1

Yes, you can do that with router.navigateToRoute() method. navigateToRoute has additional parameters. Use options (third) parameter to modify how the navigation is done.

Example:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class Products {
    constructor(router) {
        this.router = router;
    }

    activate(params) {
        // TODO: Check your params here and do navigate according to values

        this.router.navigateToRoute(
            this.router.currentInstruction.config.name, // current route name
            { '0': params['0'] }, // route parameters object
            { trigger: false, replace: true } // options
        );
    }
}

From documentation hub:

navigateToRoute(route: string, params?: any, options?: any): boolean

Navigates to a new location corresponding to the route and params specified.

Params

• route: string - The name of the route to use when generating the navigation location.
• params?: any - The route parameters to be used when populating the route pattern.
• options?: any - The navigation options.

With options you control how the history is updated.

• trigger: false - prevents the router navigation pipeline to be triggered
• replace: true - replaces the current URL in history with provided route (rewriting history), so it won't be triggered with browser back functionality