Aurelia: Are child router routes displayed in the "main" navigation bar and child view in the app.html <router-view> element?

Question

We want to have a sidebar menu and a “main” area. Depending on how you navigate, the sidebar menu items will change and the new view will be loaded into the "main" area.

I created app.html with the <router-view> element and nav-bar.html, which can display the navigation of the main router. Let's say that I initially had "Administration" and "Reports" as routes (and, therefore, menu items). When the user clicks "Administration", I would like the menu to be updated to display child routes (for example, "Users" and "Settings") and the display of the administrator model in app.html <router-view> displayed.

At first I tried to create a child router, but then I should have a new <router-view> inside admin.html (the page would not load without this). Instead, I want the admin.html view to appear inside the <router-view> app.html, and for the child routes, the "main" routes in the navigation bar menu.

In app.js, I have the following router configuration:

 this.router.configure((config) => { config.title = "Welcome"; config.map([ { route: "", moduleId: "welcom", nav: false, title: "Welcome" }, { route: "reports", moduleId: "reports", nav: true, title: "Reports" }, { route: "admin", moduleId: "users", nav: true, title: "Administration" }, ]); }); 

In users.js, I have this code:

 this.router.configure((config) => { config.title = "Users"; config.map([ { route: "", moduleId: "users", nav: true, title: "Users" }, { route: "settings", moduleId: "settings", nav: true, title: "Settings" }, ]); }); 

Initially, the menu should be:
- Administration
- Reports

and "welcome.html" should be the view in <router-view> (the default route is "welcome").

When the user clicks (goes to "Administration"), the menu should be updated:
- Users - Settings

with "users.html" in <router-view> .

However, in order to make this work at all, I need to have <router-view> in "users.html", and that’s not exactly what I want (I want the view to load in app.html <router-view> ) .

Is there any way to achieve this in Aurelia? I even tried to insert the parent router into the Admin constructor (using the Parent.of(router) binding) and then router.addRoute() . The route is added, but the menu is not updated (even though the data is tied).

Answer 1

I created a sample using Aurelia that implements a hierarchical menu structure using the menu on the left.

Here are sample project notes

You can run the sample online to check it.

The multi-level menu shows how you can quickly create a hierarchical menu when creating the Aurelia SPA website.

A multi-level menu helps users navigate the page hierarchy.

Easily set up routes and hierarchy as shown below:

 import aur = require("aurelia-router"); import mlmps = require("./MultiLevelMenuPipelineStep"); export class App { static inject = [aur.Router]; constructor(public router: aur.Router) { this.router.configure((config) => { config.title = "Aurelia VS/TS"; config.addPipelineStep("modelbind", mlmps.MultiLevelMenuPipelineStep); config.map([ { route: ["", "home"], moduleId: "views/home", nav: true, title: "home", settings: { level: 0, show: true } }, { route: ["item-1"], moduleId: "views/item-1", nav: true, title: "item 1", settings: { level: 0, show: true } }, { route: ["item-1-1"], moduleId: "views/item-1-1", nav: true, title: "item 1.1", settings: { level: 1, show: false } }, { route: ["item-1-2"], moduleId: "views/item-1-2", nav: true, title: "item 1.2", settings: { level: 1, show: false } }, { route: ["item-2"], moduleId: "views/item-2", nav: true, title: "item 2", settings: { level: 0, show: true } }, { route: ["item-2-1"], moduleId: "views/item-2-1", nav: true, title: "item 2.1", settings: { level: 1, show: false } }, { route: ["item-2-2"], moduleId: "views/item-2-2", nav: true, title: "item 2.2", settings: { level: 1, show: false } }, { route: ["item-2-2-1"], moduleId: "views/item-2-2-1", nav: true, title: "item 2.2.1", settings: { level: 2, show: false } }, { route: ["item-2-2-2"], moduleId: "views/item-2-2-2", nav: true, title: "item 2.2.2", settings: { level: 2, show: false } }, { route: ["item-2-3"], moduleId: "views/item-2-3", nav: true, title: "item 2.3", settings: { level: 1, show: false } } ]); }); } } 

The level property is used to establish a hierarchy. The show property controls the visibility of the route in the menu. The route route step of the router looks at the target navigation and accordingly sets the visibility of the route. The auxiliary navigator provides a button for moving up the level from the current route and invokes the corresponding navigation command to the router.