[英]How can I generate correct detail url using aurelia router?
One of my application's view-models resides under the routes: 我的应用程序的视图模型之一位于以下路线中:
http://localhost:9000/#/historical-orders/
http://localhost:9000/#/historical-orders/page/2/
http://localhost:9000/#/historical-orders/page/3/
and so on. 等等。 It's a
list view-model
, so whenever user clicks on one of it's rows, he or she should be directed to: 这是一个
list view-model
,因此,每当用户单击其中的一行时,都应将其定向到:
http://localhost:9000/#/historical-orders/details/:orderId
Seems simple enough, right? 看起来很简单,对吧? However there's a problem with route generation.
但是,路由生成存在问题。 Namely: if I'm browsing through one of the pages (urls ending with
page/:pageNumber/
, then calling router.generate
gives me details url that looks like that: #/historical-orders/page/1/details/:orderId
which is obviously incorrect. My route config: 即:如果我浏览页面之一(以
page/:pageNumber/
结尾的URL,则调用router.generate
会给我提供如下详细信息的URL: #/historical-orders/page/1/details/:orderId
这显然是不正确的。我的路线配置:
export class App {
configureRouter(config, route) {
config.map([
{
route: ["historical-orders", "historical-orders/page/:pageNumber"],
moduleId: "orders/historical-orders-section",
name: "historical-orders-section",
title: "Historical orders",
nav: true
}
]);
}
}
Historical orders section: 历史订单部分:
export class HistoricalOrders {
configureRouter(config, router) {
config.map([
{
route: "",
moduleId: "orders/historical/orders-list",
title: "Orders history",
nav: false
},
{
route: "details/:id",
moduleId: "orders/historical/order-details",
name: "historical-orders-details",
title: "Details",
nav: false
},
]);
}
}
And the detail-view route generation looks quite ordinarily: 而且,详细视图路线生成通常看起来很像:
this._router.generate("historical-orders-details", { id: order.pk });
So how to make the router generate proper urls? 那么如何使路由器生成正确的URL?
The generated URL is not incorrect. 生成的URL不正确。 You are using a child router, that's why the generated url is
#/historical-orders/page/1/details/:orderId
. 您正在使用子路由器,这就是为什么生成的URL是
#/historical-orders/page/1/details/:orderId
。
To get an URL, such as #/historical-orders/details/:orderId
, you should do this: 要获取URL,例如
#/historical-orders/details/:orderId
,您应该这样做:
export class App {
configureRouter(config, route) {
config.map([
{
route: ["historical-orders", "historical-orders/page/:pageNumber"],
moduleId: "orders/historical-orders-section",
name: "historical-orders-section",
title: "Historical orders",
nav: true
},
{
route: "orders/historical-orders/details/:id",
moduleId: "orders/historical/order-details",
name: "historical-orders-details",
title: "Details",
nav: false
}
]);
}
}
Then 然后
let url = this._router.generate("historical-orders-details", { id: order.pk });
EDIT To access the current router 编辑访问当前路由器
import {inject} from 'aurelia-dependency-injection';
import {Router} from 'aurelia-router';
@inject(Router)
export class HistoricalOrders {
constructor(router) {
this.router = router; //this is the same app.js router
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.