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

【问题标题】：Aurelia nested routers and router-viewsAurelia 嵌套路由器和路由器视图
【发布时间】：2017-02-07 18:53:05
【问题描述】：

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

所以我想基本上我想要嵌套路由器？

例如，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 有自己的 router-view 元素

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

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

【问题讨论】：

我认为你的任务有点过于复杂了。这真的是你需要路由器的东西吗？据我了解，您应该拥有大量常规视图。
我想要导航上的历史记录，还能够快速切换到不同的课程/学生等。如果你能提出不同的方法来实现这一点......我对 Aurelia 很陌生 - 可能遗漏一些明显的东西
您不需要使用嵌套路由器来实现这一点。一个单层路由器可以很容易地处理它以及几个组件。解释这一点需要一段时间，而且确实超出了单个 Stack Overflow 问题的范围。我强烈建议您查看 Rob Eisenberg 在 Vimeo 上的中级 Aurelia 课程。它或多或少地构建了您想要的东西。 vimeo.com/ondemand/intermediateaurelia
另外，请记住，一个页面可以有多个指向它的路由，并且一个页面也可以通过不同的参数路由到它自己。我会在回答中给出一些提示。
我需要为这么简单的事情做一个中级课程？！？

标签： aurelia

【解决方案1】：

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

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

studentId 参数是可选的。

然后我会看看如何使用这个课程页面来做你想做的一切，仅仅基于它在activate回调中接收到的参数。

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

【讨论】：

谢谢，我知道你打算用这个了。不过感觉有点像黑客。我认为使用路由器很容易，但似乎 aurelia 中的路由器非常基础。
不知道是什么让它成为黑客。这是一个简单的解决方案，不会创建不必要的复杂架构。我本可以向您展示如何使用您拥有的设计来做到这一点，但尝试帮助您以不同的方式思考问题。另一种选择是使用可选参数而不是两个单独的参数。
事实上，我将更新我的答案以使用可选参数。
是的，也许不是黑客。只是不是我看到这个工作的方式。谢谢你的麻烦。