Как установить/прочитать строку запроса при использовании маршрутизатора в aurelia?

При использовании растрового маршрутизатора aurelia.io, какой предпочтительный метод для чтения и установки строки запроса?

Например, в URL: http://www.myapp.com/#/myroute1/?s=mystate

Как я читаю и устанавливаю часть URL-адреса ?s=mystate и корректно перемещаю маршрутизатор aurelia и помню это состояние, так что всякий раз, когда я прихожу в свою модель просмотра route1, я могу прочитать эту переменную состояния и сделать что-то с это?

Ответ 1

В viewmodel вы можете реализовать метод activate (params, routeConfig), а параметры объекта должны содержать переменные запроса

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

Чтобы перейти к некоторому маршруту, вы должны указать имя этого маршрута в 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' }
    ]);

а затем используйте метод NavigateToRoute с параметрами.

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

Ответ 2

Если вы хотите изменить queryParams и перезагрузить страницу с ним (например, изменить номер страницы при нажатии ссылки на страницы) - вы должны использовать determineActivationStrategy с replace.

Создайте модель представления и добавьте функцию determineActivationStrategy:

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

  determineActivationStrategy() {
    return activationStrategy.replace;
  }

}

Добавить активировать событие в вашу модель для сохранения параметров:

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

Добавить код для перезагрузки или навигации по тем же или новым параметрам:

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

P.S. для this.router использовать доступ для инъекций и не забудьте установить name маршрутизатора в конфигурации приложения:

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

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

Ответ 3

В соответствии с последней конфигурацией строка запроса не будет получена, если вы не установили состояние push.

Установите состояние push в значение true. и добавьте базовый тег в index.html.

<base href="#" onclick="location.href='http://localhost:9000/'; return false;"> - index.html

config.options.pushState = true; - app.js → метод configureRouter.