我的应用程序的 View 模型之一位于路由下:
http://localhost:9000/#/historical-orders/
http://localhost:9000/#/historical-orders/page/2/
http://localhost:9000/#/historical-orders/page/3/
等等。这是一个 ListView 模型
,所以每当用户点击其中一行时,他或她应该被引导至:
http://localhost:9000/#/historical-orders/details/:orderId
看起来很简单,对吧?但是,路由生成存在问题。即:如果我正在浏览其中一个页面(以 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
}
]);
}
}
历史订单部分:
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
},
]);
}
}
详细 View 路由生成看起来很普通:
this._router.generate("historical-orders-details", { id: order.pk });
那么如何让路由器生成正确的url呢?
最佳答案
生成的 URL 没有错误。您正在使用子路由器,这就是生成的 url 是 #/historical-orders/page/1/details/:orderId
的原因。
要获取 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
}
]);
}
}
然后
let url = this._router.generate("historical-orders-details", { id: order.pk });
编辑访问当前路由器
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
}
}
关于javascript - 如何使用 aurelia 路由器生成正确的详细信息 url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38943781/