Child routes in aurelia, additional configureRoutes or viewports to implement

Question

I am developing my first app in aurelia. Consider I have this main navigation in my app:

app.js

|->home

|->user

|->students

And for example in my students page I want another navigation:

students.js

|->list

|-> get:id

|-> add

|-> delete

|-> edit

now I think I have two ways. One to call configureRoutes also in students.js and use that in its child routes or to define all child routes in the app.js grouped using viewports.

Which of these two are better. Is there any better solution?

I would prefer calling configureRoutes in each of the sub components. it gives you the most flexible result. consider what happens when you decide to move a sub components and all of his routes to a different part of the application. also you have the best separation of concerns in that way. — avrahamcool

Matthew James Davis Matthew James Davis · Accepted Answer · 2018-12-05T02:46:05

Try this instead:

{ route: 'students', redirect: 'students/list' },
{ route: 'students/list' },
{ route: 'students/get/:id' },
{ route: 'students/add' }

If you have shared content or logic, you can break it out using a compose. If this doesn't work, let me recommend the viewport strategy, as it is more robust.

With child routers, Aurelia doesn't know about child routes until you load them. That means if you're in students/add and want to go to user/home, you can't ask the router about user/home because it doesn't know about it yet. This causes difficulty in larger applications.

Child routes in aurelia, additional configureRoutes or viewports to implement

1 Answers