我们想要一个侧边栏菜单和一个" main"区域。根据您的导航方式,侧边栏的菜单项将会更改,并且新视图将加载到" main"区域。
我创建了一个带有<router-view>
元素的app.html,以及一个可以显示主路由器导航的nav-bar.html。让我们说我最初有&#34;管理&#34;和&#34;报告&#34;作为路线(以及菜单项)。当用户点击&#34;管理&#34;时,我希望菜单更新以显示子路线(例如&#34;用户&#34;和&#34;设置&#34;)并且管理员视图模型显示在app.html&#39; <router-view>
。
最初我尝试创建一个子路由器,但后来我必须在admin.html中有一个新的<router-view>
(页面赢了,甚至没有这个加载)。相反,我希望admin.html视图显示在app.html的<router-view>
内,并且要让子路由替换&#34; main&#34;导航栏菜单中的路线。
在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" },
]);
});
最初,菜单应为:
- 管理
- 报告
和&#34; welcome.html&#34;应该是<router-view>
中的视图(默认路线是&#39; welcome&#39;)。
当用户点击(导航到)&#34;管理&#34;时,菜单应刷新为:
- 用户
- 设置
使用&#34; users.html&#34;在<router-view>
。
但是,为了让这一切发挥作用,我需要在&#34; users.html&#34;中进一步<router-view>
。并且这不是我想要的(我希望视图加载到app.html&#39; s <router-view>
)。
有没有办法在Aurelia实现这一目标?我甚至尝试将父路由器注入Admin构造函数(使用Parent.of(router)
绑定),然后router.addRoute()
。路线被添加,但菜单不会更新(即使它的数据绑定)。
答案 0 :(得分:12)
我使用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
属性控制菜单中路径的可见性。路由器导航管道步骤查看目标导航并相应地设置路径可见性。导航助手提供了一个按钮,用于从当前路线向上导航一个级别,并调用相应的导航命令到路由器。