Aurelia：子路由器路由显示在“主”栏中app.html< router-view>中的导航栏和子视图元件？ [英] Aurelia: child router routes display in "main" nav-bar and child view in app.html <router-view> element?
问题描述
我们要有一个侧边栏菜单和一个主区域。根据您的导航方式，侧边栏的菜单项将更改，并且新视图将被加载到主区域。
我使用以下命令创建了app.html < router-view> 元素，以及可以显示主路由器导航的nav-bar.html。假设我最初将管理和报告作为路径（因此也包含菜单项）。当用户单击管理时，我希望菜单进行更新以显示子路线（例如用户和设置），并在app.html的中显示管理视图模型< router-view> 。
最初，我尝试创建一个子路由器，但随后必须有一个新的< router-view> 放在admin.html内（如果没有此页面，网页将无法加载）。相反，我希望admin.html视图显示在app.html的< router-view> 内，并为子路由替换其中的主路由导航栏菜单。
在app.js中，我具有以下路由器配置：
this.router.configure（（config）=> {
config.title = Welcome;
config.map（[
{route：，moduleId： welcom，导航：false，标题： Welcome}，
{route： reports，moduleId： reports，nav：true，标题： Reports }，
{route： admin，moduleId： users，nav：true，标题： Administration}，
]）;
}）;
在users.js中，我有以下代码：
this.router.configure（（config）=> {
config.title =用户;
配置.map（[
{route：，moduleId： users，nav：true，标题： Users}，
{route： settings，moduleId： settings，nav： true，title：设置}，
]）;
}）;
最初，菜单应为：
-管理
-报告
和 welcome.html应该是< router-view> 中的视图（默认路径为欢迎。）。
当用户单击（导航至）管理时，菜单应刷新为：
-用户
-设置
在< router-view> 。
但是，为了使它完全起作用，我需要再加上< router-view> 在 users.html中，而这并不是我真正想要的（我希望视图加载到app.html的< router-view> 中）。 / p>
在Aurelia是否可以实现这一目标？我什至尝试将父路由器注入Admin构造函数中（使用 Parent.of（router）绑定），然后将 router.addRoute（）。路由已添加，但菜单不会更新（即使绑定了数据）。
我创建了一个示例，使用Aurelia使用左侧菜单实现分层菜单结构。
这里是关于示例项目的注释
您可以在线运行示例进行测试
多级菜单示例显示了在构建Aurelia SPA网站时如何快速创建分层菜单。
多级菜单可帮助用户浏览页面的层次结构。
配置路由和层次结构很容易，如下所示：
import aur = require（ aurelia-router）;
import mlmps = require（ ./ MultiLevelMenuPipelineStep）;
出口类别App {
静态注入= [aur.Router];
构造函数（公共路由器：aur.Router）{
this.router.configure（（config）=> {
config.title = Aurelia VS / TS;
config.addPipelineStep（ modelbind，mlmps.MultiLevelMenuPipelineStep）;
config.map（[
{route：[， home]，moduleId： views / home，导航：true，标题： home，设置：{级别：0，显示：true}}，
{路线：[ item-1]，moduleId： views / item-1，导航： true，标题： item 1，设置：{级别：0，显示：true}}，
{路线：[ item-1-1]，moduleId： views / item-1-1 ，导航：true，标题： item 1.1，设置：{级别：1，显示：false}}，
{路线：[ item-1-2]，moduleId： views / item-1 -2，导航：true，标题： item 1.2，设置：{级别：1，显示：false}}，
{路线：[ item-2]，moduleId： views / item- 2，导航：true，标题： item 2，设置：{级别：0，显示：true}}，
{路线：[ item-2-1]， moduleId： views / item-2-1，导航：true，标题： item 2.1，设置：{级别：1，显示：false}}，
{路线：[ item-2-2 ]，moduleId： views / item-2-2，导航：true，标题： item 2.2，设置：{级别：1，显示：false}}，
{路线：[ item- 2-2-1]，moduleId： views / item-2-2-1，nav：true，标题： item 2.2.1，设置：{级别：2，显示：false}}，
{route：[ item-2-2-2]，moduleId： views / item-2-2-2，nav：true，标题： item 2.2.2，设置：{级别：2 ，show：false}}，
{route：[ item-2-3]，moduleId： views / item-2-3，nav：true，标题： item 2.3，设置：{级别：1，显示：false}}
]）;
}）；
}
}
级别属性用于建立层次结构。 显示属性控制菜单中路线的可见性。路由器导航管线步骤查看目标导航并相应地设置路线可见性。导航助手提供了一个按钮，用于从当前路线向上导航一个级别，并调用相应的导航命令到路由器。
We want to have a sidebar menu and a "main" area. Depending on how you navigate, the sidebar's menu items will change, and a new view will be loaded into the "main" area.
I've created app.html with a <router-view> element, and a nav-bar.html that can display the main router's navigation. Let's say that I initially have "Administration" and "Reports" as routes (and therefore menu items). When a user clicks on "Administration", I'd like the menu to update to display child routes (say "Users" and "Settings") and have the admin view-model display in the app.html's <router-view>.
Initially I tried to create a child router, but then I have to have a new <router-view> inside of admin.html (the page won't even load without this). Instead, I want the admin.html view to display inside the <router-view> of app.html, and for the child routes to replace the "main" routes in the nav-bar menu.
In app.js I have the following router config:
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 the <router-view> (the default route is 'welcome').
When the user clicks (navigates to) "Administration", the menu should refresh to be:
- Users
- Settings
with "users.html" in the <router-view>.
However, in order to get this to work at all I need to have a further <router-view> in "users.html" and that's not really what I want (I want the view to load in the app.html's <router-view>).
Is there a way to achieve this in Aurelia? I've even tried injecting the parent router into the Admin constructor (using Parent.of(router) binding) and then router.addRoute(). The route gets added, but the menu doesn't update (even though it's data bound).
I created a sample using Aurelia that implements a hierarchical menu structure using a left-side menu.
Here are notes about the sample project
You can run the sample online to test it out
The multi-level menu sample shows how you can quickly create a hierarchical menu when building an Aurelia SPA website.
The multi-level menu helps users navigate through a hierarchy of pages.
It is easy to configure the routes and the 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 the hierarchy. The show property controls the visibility of the route in the menu. The router navigation pipeline step looks at the target navigation and sets the route visiblity accordingly. The navigation helper provides a button to navigate up a level from the current route, and invokes the corresponding navigation commmand to the router.
这篇关于Aurelia：子路由器路由显示在“主”栏中app.html< router-view>中的导航栏和子视图元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
