routing - Aurelia:子路由器路由显示在 "main"导航栏和 app.html 元素中的 subview ？

Question

我们想要一个侧边栏菜单和一个“主要”区域。根据您的导航方式，侧边栏的菜单项将发生变化，并且新 View 将加载到“主”区域。

我用 <router-view> 创建了 app.html元素和一个可以显示主路由器导航的 nav-bar.html。假设我最初将“管理”和“报告”作为路由(因此也是菜单项)。当用户单击“管理”时，我希望更新菜单以显示子路由(例如“用户”和“设置”)并在 app.html 的 <router-view> 中显示管理 View 模型.

最初我试图创建一个子路由器，但后来我必须有一个新的 <router-view>在 admin.html 内部(没有这个页面甚至不会加载)。相反，我希望 admin.html View 显示在 <router-view> 中。的 app.html，并为子路由替换导航栏菜单中的“主”路由。

在 app.js 我有以下路由器配置:

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

在 users.js 中，我有以下代码:

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

最初，菜单应该是:
- 行政
- 报告

并且“welcome.html”应该是 <router-view> 中的 View (默认路由是“欢迎”)。

当用户单击(导航到)“管理”时，菜单应刷新为:
- 用户
- 设置

在 <router-view> 中带有“users.html” .

但是，为了让它完全正常工作，我需要进一步 <router-view>在“users.html”中，这并不是我真正想要的(我希望将 View 加载到 app.html 的 <router-view> 中)。

有没有办法在 Aurelia 中实现这一目标？我什至尝试将父路由器注入(inject) Admin 构造函数(使用 Parent.of(router) 绑定(bind))，然后 router.addRoute() .路线被添加，但菜单没有更新(即使它是数据绑定(bind)的)。

Answer 1

我使用 Aurelia 创建了一个示例，该示例使用左侧菜单实现了分层菜单结构。

这里是 notes about the sample project

您可以run the sample online测试一下



多级菜单示例展示了在构建 Aurelia SPA 网站时如何快速创建分层菜单。

多级菜单可帮助用户浏览页面层次结构。

配置路由和层次结构很容易，如下所示:

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

level属性用于建立层次结构。 show属性控制菜单中路由的可见性。路由器导航管道步骤查看目标导航并相应地设置路线可见性。导航助手提供了一个从当前路由向上导航的按钮，并向路由器调用相应的导航命令。