0
votes

I have a main App router and multiple child routers. I'd like to have the option of specifying the child route to open when navigating from the parent route.

Parent Router:

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' }
  ]);
}

Child Router for Students:

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});
    }
  }
}

The above scenario (using navigateToRoute() within activate) doesn't work, nor am I sure it's the best way. How can I have the option to navigate straight from the main app router to the student-profile screen if I include an id param?

2
hmm, i'm wondering if this is a bug.Ashley Grant
See github.com/aurelia/router/issues/89 and github.com/aurelia/router/issues/90, the latter sounds like there is a possible work around involving a package but I didn't dig too much into it. I think the child routes aren't loaded yet which is why using the name doesn't workmgiesa
Actually I may have misunderstood the problem. Instead of redirecting from the Students page, does this work if you move that to the Home page (the default landing page, student-home)? Also you could move it to CanActivate and return a RedirectToRoute instead of navigating via the routermgiesa

2 Answers

4
votes

I gave up on using named routes with child routers. If someone else understands them better than me, I'd be curious. However, I have found it works perfectly to just use the URL routing from any part of the app.

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

You don't need to use active in your child route. Aurelia router will go automatically to your child route.

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;
  }
}

Remove active and in your module "students/profile/overview" call active(params) to get student from api or what ever you want you can do here with provied params.