在 aurelia 中使用路由器时如何 set/read 查询字符串？

Question

使用 aurelia.io 框架路由器时，读取和设置查询字符串的首选方法是什么？

例如，在url中：http://www.myapp.com/#/myroute1/?s=mystate

我如何读取和设置 url 的 ?s=mystate 部分并让 aurelia 路由器正确导航并记住该状态，以便每当我到达我的 route1 视图模型时我可以读取那个状态变量并用它做些什么吗？

Answer 1

在 viewmodel 上你可以实现方法 activate(params, routeConfig) 并且对象参数应该包含你的查询变量

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

要导航到某条路线，您必须在 app.js 中指定该路线的名称（名称：'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});

Answer 2

根据最新配置，如果您未设置推送状态，将不会检索查询字符串。

将推送状态设置为真。并在 index.html.

中添加基本标签

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

config.options.pushState = true; - app.js -> 配置路由器方法。

Answer 3

如果您想更改 queryParams 并使用它重新加载页面（例如更改分页页码 link 单击）- 您必须使用 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;
  }
}

在 aurelia 中使用路由器时如何 set/read 查询字符串？

How do I set/read a query string when using the router in aurelia?

javascript

query-string

aurelia