Come si imposta/legge una stringa di query quando si utilizza il router in aurelia?

Question

Quando si utilizza il router framework aurelia.io, qual è il metodo preferito per leggere e impostare una stringa di query?

Ad esempio, l'URL: http://www.myapp.com/#/myroute1/?s=mystate

Come faccio a leggere e impostare la parte ?s=mystate del URL e avere il router Aurelia navigare in modo corretto e ricordare che lo stato, in modo tale che ogni volta che arrivo a mia route1 ViewModel I può leggere quella variabile di stato e fare qualcosa con esso?

Answer 1

Su viewmodel è possibile implementare il metodo activate (params, routeConfig) e params oggetto dovrebbe contenere le variabili della query

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

di navigare a qualche percorso, è necessario specificare il nome di questo percorso in app.js (nome: "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' } 
    ]); 

e quindi utilizzare il metodo NavigateToRoute con i parametri.

router.navigateToRoute('redirect', { s:'mystate'}, {replace: true}); 

Answer 2

Come per la configurazione più recente, la stringa di query non saranno recuperati se non avete impostato lo stato di spinta.

Impostare lo stato di push su true. e aggiungi il tag base in index.html.

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

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

Answer 3

Se si desidera modificare queryParams e ricaricare la pagina con esso (ad esempio, il cambiamento del numero di pagina sul collegamento impaginazione click) - è necessario utilizzare determineActivationStrategy con replace.

Crea vista del modello e aggiungere determineActivationStrategy funzione:

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

    determineActivationStrategy() { 
    return activationStrategy.replace; 
    } 

} 

Aggiungi evento activate al modello per params risparmio:

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

Aggiungere codice di ricarica o di navigare con parametri uguali o nuove:

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

PS per l'uso this.router accesso iniettare e non dimenticare di impostare name di router in configurazione app:

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

    constructor(router){ 
    this.router = router; 
    } 
}