Wir möchten ein Sidebar-Menü und einen "Haupt" -Bereich haben. Je nachdem, wie Sie navigieren, ändern sich die Menüelemente der Seitenleiste und eine neue Ansicht wird in den "Haupt" -Bereich geladen.

Ich habe app.html mit einem @ erstel<router-view> -Element und eine Navigationsleiste.html, mit der die Navigation des Hauptrouters angezeigt werden kann. Nehmen wir an, ich habe zunächst "Administration" und "Reports" als Routen (und damit Menüpunkte). Wenn ein Benutzer auf "Administration" klickt, möchte ich, dass das Menü aktualisiert wird, um untergeordnete Routen anzuzeigen (z. B. "Benutzer" und "Einstellungen"), und dass das Admin-Ansichtsmodell in der app.html angezeigt wir<router-view>.

Initial habe ich versucht, einen untergeordneten Router zu erstellen, aber dann muss ich einen neuen @ hab<router-view> innerhalb von admin.html (die Seite wird ohne diese nicht einmal geladen). Stattdessen soll die Ansicht admin.html im @ angezeigt werde<router-view> von app.html und für die untergeordneten Routen, um die "Haupt" -Routen im Navigationsleistenmenü zu ersetzen.

In ap, p.js Ich habe die folgende Router-Konfiguration:

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

n users.js habe ich diesen 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" },
    ]);
});

as Menü sollte anfänglich wie folgt aussehen:
- Administration
- Berichte

und "welcome.html" sollte die Ansicht im @ se<router-view> (Die Standardroute lautet "Willkommen".

Wenn der Benutzer auf "Administration" klickt (zu "Administration" navigiert), sollte das Menü folgendermaßen aktualisiert werden:
- Benutzer - Einstellungen

mit "users.html" im<router-view>.

Um dies jedoch überhaupt zum Laufen zu bringen, brauche ich ein weiteres<router-view> in "users.html" und das ist nicht wirklich das, was ich will (ich möchte, dass die Ansicht in die app.html @ geladen wi<router-view>).

ibt es eine Möglichkeit, dies in Aurelia zu erreichen? Ich habe sogar versucht, den übergeordneten Router in den Admin-Konstruktor einzuschleusen (mitParent.of(router) Bindung) und dannrouter.addRoute(). Die Route wird hinzugefügt, aber das Menü wird nicht aktualisiert (obwohl es datengebunden ist).