Aurelia 子路由器重定向到特定路由答案

【问题标题】：Aurelia Child Router redirect to specific routeAurelia 子路由器重定向到特定路由
【发布时间】：2017-03-25 16:19:26
【问题描述】：

我有一个主应用路由器和多个子路由器。我希望在从父路由导航时指定要打开的子路由。

父路由器：

configureRouter(config, router) {
  this.router = router;
  config.map([
    { route: ['','home'],      name: 'home',         moduleId: 'home/home' },
    { route: 'students/:id?',  name: 'students',     moduleId: 'students/students' },
    { route: 'staff',          name: 'staff',        moduleId: 'staff/staff' }
  ]);
}

学生子路由器：

export class Students {

  configureRouter(config, router) {
    config.map([
      { route: ['', 'home'],    name: 'student-home',           moduleId: 'students/students-home' },
      { route: 'list',          name: 'student-list',           moduleId: 'students/student-list' },
      { route: 'profile/:id',   name: 'student-profile',        moduleId: 'students/profile/overview' },
      { route: 'lockers',       name: 'student-lockers',        moduleId: 'students/lockers/home' }
    ]);
    this.router = router;
  }

  activate(params) {
    if (params.id) {
      console.log("Going straight to a student record for: ", params);
      this.router.navigateToRoute('student-profile', {id: params.id});
    }
  }
}

上述情况（在激活中使用navigateToRoute()）不起作用，我也不确定这是最好的方法。如果我包含 id 参数，如何选择直接从主应用程序路由器导航到学生个人资料屏幕？

【问题讨论】：

嗯，我想知道这是否是一个错误。
参见github.com/aurelia/router/issues/89 和github.com/aurelia/router/issues/90，后者听起来可能涉及到一个包，但我没有深入研究它。我认为子路由尚未加载，这就是为什么使用该名称不起作用
其实我可能误解了这个问题。如果您将其移动到主页（默认登录页面，学生主页）而不是从学生页面重定向，这是否有效？您也可以将其移动到 CanActivate 并返回 RedirectToRoute 而不是通过路由器导航

标签： aurelia

【解决方案1】：

我放弃了将命名路由与子路由器一起使用。如果其他人比我更了解他们，我会很好奇。但是，我发现只使用应用程序任何部分的 URL 路由非常有效。

this.router.navigate('#/students/profile/' + record.id);

【讨论】：

谢谢 - 这真的帮助了我。正是我需要的

【解决方案2】：

您不需要在子路由中使用 active。 Aurelia 路由器将自动转到您的子路由。

export class Students {

  configureRouter(config, router) {
    config.map([
      { route: ['', 'home'],    name: 'student-home',           moduleId: 'students/students-home' },
      { route: 'list',          name: 'student-list',           moduleId: 'students/student-list' },
      { route: 'profile/:id',   name: 'student-profile',        moduleId: 'students/profile/overview' },
      { route: 'lockers',       name: 'student-lockers',        moduleId: 'students/lockers/home' }
    ]);
    this.router = router;
  }
}

删除活动并在您的模块“学生/个人资料/概述”中调用 active(params) 以从 api 获取学生，或者您可以使用提供的参数在此处执行任何操作。

【讨论】：

但是...我如何使用父级的navigateToRoute 访问子级的student-profile 路由？或者至少，提供一个参数，让子路由在激活时可以跳转到其中一个子路由？
当导航到一个路由时，如果你想在 url 中包含一个参数，请将其作为第二个参数包含在函数中：router.navigateToRoute('students', {id:3242}) 这将产生一个类似 https://yourapp.com/students?id=3242 的 url然后可以在你的学生 viewModel 中处理你想要的任何东西。