13

When using the aurelia.io framework router, what is the preferred method for reading and setting a query string?

For example, in the url: http://www.myapp.com/#/myroute1/?s=mystate

How do I read and set the ?s=mystate part of the url and have the aurelia router navigate correctly and remember that state, such that whenever I arrive in my route1 viewmodel I can read that state variable and do something with it?

bedo
  • 866
  • 8
  • 15

3 Answers3

20

On viewmodel you can implement method activate(params, routeConfig) and object params should contain your query variables 

activate(params, routeConfig){
 console.log(params.s); //should print mystate
}

To navigate to some route, you have to specify the name of this route in app.js (name: 'redirect')

 config.map([
      { route: ['','welcome'],  moduleId: './welcome',      nav: true, title:'Welcome' },
      { route: 'flickr',        moduleId: './flickr',       nav: true, title:'Flickr' },
      { route: 'redirect', moduleId: './redirect', name: 'redirect'}, 
      { route: 'child-router',  moduleId: './child-router', nav: true, title:'Child Router' }
    ]);

and then use method NavigateToRoute with parameters.

router.navigateToRoute('redirect', { s:'mystate'}, {replace: true});
emilpytka
  • 763
  • 7
  • 19
  • 1
    Thanks, and how do I set the query string? – bedo Jun 17 '15 at 15:19
  • @us3r 1) does router.generate also require {replace: true}? 2) if you are in a different view-model, do import {App} from './app' to access router? – Chi Row Jun 17 '15 at 22:05
  • @ChiRow 1) no, replace is not require, 2) yes, you have to import App (at least i did not found another way to use router). – emilpytka Jun 18 '15 at 07:44
  • 1
    @us3r it worked, but only when the route is explicitly named, which isn't very obvious from the api. Thank you for the help! – bedo Jun 18 '15 at 13:06
3

If you want to change queryParams and reload page with it (e.g. change page number on pagination link click) -- you must use determineActivationStrategy with replace.

Create view model and add determineActivationStrategy function:

import {activationStrategy} from 'aurelia-router';
export class ModelView{

  determineActivationStrategy() {
    return activationStrategy.replace;
  }

}

Add activate event to your model for saving params:

activate(params, routeConfig, navigationInstruction){
    this.queryParams = params ? params : {};
}

Add code for reload or navigate with same or new parameters:

moveToNewPage(newPageNumber){
  this.queryParams.page = newPageNumber; // change page param to new value
  this.router.navigateToRoute(this.router.currentInstruction.config.name, this.queryParams);
}

P.S. for this.router access use inject and don't forget to set name of router in app configuration:

import {Router} from 'aurelia-router';
export class ModelView{
  static inject() { return [Router] };

  constructor(router){
    this.router = router;
  }
}
JayDi
  • 1,037
  • 15
  • 24
1

As per the latest configuration, the query string will not be retrieved if you didn't set the push state.

Set push state to true. and add base tag in index.html.

<base href="http://localhost:9000/"> - index.html

config.options.pushState = true; - app.js -> configureRouter method.

Raja
  • 91
  • 1
  • 6