Aurelia:子路由器路由显示在app.html <router-view>元素的"main"导航栏和子视图中？

Question

我们想要一个侧边栏菜单和一个"主要"区域.根据您的导航方式,侧边栏的菜单项将更改,并且新视图将加载到"主"区域.

我创建了一个带有<router-view>元素的app.html ,以及一个可以显示主路由器导航的nav-bar.html.假设我最初将"管理"和"报告"作为路径(以及菜单项).当用户点击"管理"时,我希望菜单更新以显示子路线(例如"用户"和"设置"),并在app.html中显示管理员视图模型<router-view>.

最初我尝试创建一个子路由器,但后来我必须有一个新<router-view>的admin.html内部(如果没有这个页面甚至不会加载).相反,我希望admin.html视图显示在<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>(默认路由是'welcome')中的视图.

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

在"users.html"中<router-view>.

但是,为了使这一点工作,我需要进一步<router-view>使用"users.html",这不是我想要的(我希望视图加载到app.html中<router-view>).

有没有办法在奥里利亚实现这一目标？我甚至尝试将父路由器注入Admin构造函数(使用Parent.of(router)绑定)然后router.addRoute().路径被添加,但菜单不更新(即使它的数据绑定).

Answer 1

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

以下是有关示例项目的说明

您可以在线运行示例以进行测试

多级菜单示例显示了在构建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属性控制菜单中路径的可见性.路由器导航管道步骤查看目标导航并相应地设置路径可见性.导航助手提供了一个按钮,用于从当前路线向上导航一个级别,并调用相应的导航命令到路由器.