Wie kann ich eine Abfragezeichenfolge setzen/lesen, wenn ich den Router in Aurelia verwende?

Question

Bei Verwendung des aurelia.io Framework-Routers ist die bevorzugte Methode zum Lesen und Festlegen einer Abfragezeichenfolge.

Zum Beispiel in der URL: http://www.myapp.com/#/myroute1/?s=mystate

Wie kann ich lesen und stellen Sie den ?s=mystate Teil der URL und haben die aurelia Router navigieren richtig und denken Sie daran, diesen Zustand, so dass, wenn ich in meinem route1 Viewmodel ich komme kann diese Statusvariable lesen und etwas damit machen?

Answer 1

Auf Viewmodel Sie Methode activate implementieren können (params, routeConfig) und Objekt params Ihre Query-Variablen

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

Um zu einem gewissen Route navigieren enthalten soll, müssen Sie den Namen dieser Route in app.js angeben (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' } 
    ]); 

und dann Methode NavigateToRoute mit Parametern verwenden.

Answer 2

Gemäß der letzten Konfiguration wird die Abfragezeichenfolge nicht abgerufen, wenn Sie den Push-Status nicht festgelegt haben.

Setzen Sie den Push-Zustand auf "True". und fügen Sie base-Tag in index.html hinzu.

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

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

Answer 3

Wenn Sie queryParams ändern und neu zu laden Seite mit ihm (zum Beispiel Änderung Seitenzahl auf Paginierung Link klicken) - Sie determineActivationStrategy mit replace verwenden.

erstellen Modellansicht und fügen Sie determineActivationStrategy Funktion:

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

    determineActivationStrategy() { 
    return activationStrategy.replace; 
    } 

} 

hinzufügen Activate-Ereignis zu Ihrem Modell für das Speichern von params:

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

Fügen Sie den Code für reload oder navigieren mit gleichen oder neuen Parametern:

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

PS für this.router Zugang Gebrauch injiziert und nicht vergessen name der Router in App-Konfiguration einstellen:

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

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