如何使用aurelia路由器生成正确的详细信息？

Question

我的一个应用程序的视图模型所在的路径下：

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 

看起来很简单，对不对？但是，路由生成存在问题。即：如果我浏览过的网页之一（与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 
      }, 
     ]); 
    } 
} 

和详细信息视图线路生成看起来很平常：

this._router.generate("historical-orders-details", { id: order.pk }); 

那么如何牛逼使路由器生成适当的URL？

Answer 1

生成的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 
    } 
}