Question

我想在屏幕上有一个课程列表（人为的例子）。当您单击课程时，它会扩展（仍显示课程列表）到参加课程的学生列表中。当我点击学生时，它必须扩展到学生详细信息的视图（仍然显示学生列表和课程列表）。等

所以基本上我想拥有嵌套路由器，我想？

示例，app.js

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

course.js（注入路由器）：

this.router.configure(config => {
        config.map([
            {route: "course/:course-id/student/:student-id", name: "student", moduleId: "student"}
        ]);
})

student.html有自己的路由器视图元素

以上工作，但是当我点击顶级链接（一个课程）时，内容将被放入内部路由器视图中。更糟糕的是，现在每个学生都有一个扩展的路由器视图，我该如何管理呢？

基本上我找不到任何关于如何做到这一点的文档 - 子路由器的东西似乎不是我需要的东西？任何帮助将不胜感激。

Answer 1

让我们看一下这个以及如何使用单个路由器实现这一点。这是我可能使用的路线结构。

[
  { route: "", moduleId: 'no-selection', title: 'Select'},
  { route: "course/:courseId/:studentId?", moduleId: 'course',    name: 'course'}
]);

studentId参数是可选的。

然后，我将根据它在activate回调中收到的参数，查看如何使用此课程页面完成您想要的所有操作。

我现在没有时间给出完整答案，但希望这会有助于您走上正确的道路！

Aurelia嵌套路由器和路由器视图

1 个答案: