将 route-href 与子路由器一起使用

Question

我试图在子路由器的视图中使用 route-href 属性。我的父路由器看起来像这样：

configureRouter(config, router){
    config.title = 'Kali';
    config.map([
        // { route: '', moduleId: 'no-selection', title: 'Select'},
        { route: ['', 'courses'],  moduleId: 'courses' }
    ]);

    this.router = router;
}

我的子路由器是这样的：

configureRouter(config, router){
    config.map([
        { route: ['', '/'], moduleId: 'no-selection', title: 'Select'},
        { route: '/:id',  moduleId: 'courses/course-detail' }
    ]);

    this.router = router;
}

这是我的 route-href 属性...

<a route-href="route: '', params: { id: course.id }" click.delegate="$parent.select(course.id)">

当我使用它时，我希望 route-href 使用来自子路由器的路由。相反，我得到了这个堆栈跟踪。查看代码，我看到 RouteHref 调用 router.generate 来创建路由。 router.generate 应该递归地遍历路由器层次结构，所以这应该不是问题。但是，我不确定将哪个路由器传递给 route-href 构造函数。我认为这里有两个问题——首先，我不确定 route-href 是否接收到正确的路由器，其次，我不确定 route-href 是否或如何处理带有空路由的表达式.

堆栈跟踪：

message: "There is no route named '', params: { id: course.id }"
stack: "Error: There is no route named '', params: { id: course.id }↵    at RouteRecognizer.generate (http://localhost:9000/jspm_packages/github/aurelia/route-recognizer@0.4.0/index.js:244:19)↵    at AppRouter.generate (http://localhost:9000/jspm_packages/github/aurelia/router@0.8.0/router.js:210:38)↵    at Router.generate (http://localhost:9000/jspm_packages/github/aurelia/router@0.8.0/router.js:207:32)↵    at RouteHref.processChange (http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.12.0/route-href.js:42:34)↵    at RouteHref.bind (http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.12.0/route-href.js:30:16)↵    at BehaviorInstance.bind (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/behavior-instance.js:68:35)↵    at View.bind (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/view.js:68:26)↵    at ViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/view-factory.js:173:18)↵    at BoundViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/view-factory.js:127:35)↵    at Repeat.processArrayItems (http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.11.0/repeat.js:132:32)"

有什么想法吗？谢谢。

Answer 1

看起来route-href使用了路由的name属性。

也许您的子路由器应该是这样的：

configureRouter(config, router){
    config.map([
        { route: ['', '/'], moduleId: 'no-selection', title: 'Select'},
        { route: '/:id',  moduleId: 'courses/course-detail', name: 'course-detail' }
    ]);

    this.router = router;
}

在您看来：

<a route-href="route: course-detail; params.bind: { id: course.id }" ...

将 route-href 与子路由器一起使用

Using route-href with child routers

javascript

aurelia