如何使用aurelia路由器生成正确的详细url ?

How can I generate correct detail url using aurelia router?

本文关键字：url aurelia 何使用 路由器      更新时间：2023-09-26

我的应用程序的一个视图模型驻留在路由下:

http://localhost:9000/#/historical-orders/
http://localhost:9000/#/historical-orders/page/2/
http://localhost:9000/#/historical-orders/page/3/

等等。它是一个list view-model，所以当用户点击其中的一行时，他或她应该被引导到:

http://localhost:9000/#/historical-orders/details/:orderId

看起来很简单，对吧?然而，路由生成有一个问题。即:如果我正在浏览其中一个页面(url以page/:pageNumber/结尾)，那么调用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
            },
        ]);
    }
}

detail-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 });

EDIT访问当前路由器

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
    }
}
相关文章：