Question

我正在构建Aurelia应用程序，我有一个顶级导航，用于使用路由器构建的高级导航应用程序。我还需要为我的应用程序的不同部分（每个目录）单独的侧面导航。

例如，我在网站上有一个用户部分，其中包含多个页面（视图和视图模型），用于不同的功能，我需要用户部分拥有自己的侧面导航。我希望每个部分都有一个单独的路由器和导航侧栏。入门指南显示了子路由器方案，但它仅在给定页面上。

我希望我的应用结构看起来像这样：

+src
    +users
      - home.js
      - home.html
      - users-nav-bar.html (this is what I'm unsure how set up)
      - users-nav-bar.js
      - users-router.js (not sure if this is possible)
      - user-profile.html
      - user-profile.js
      - user-roles.html
      - user-roles.js
    +cases
      - case-nav-bar.html
      - case-nav-bar.js
      etc...

Aurelia有可能吗？是否有其他/更好的方法来构建应用程序的每个部分的侧导航栏？谁能指点我一个例子？

Answer 1

绝对有可能，我在我的示例应用中使用它。这就是我所做的。请注意，这只是一个子路由器\导航，我有整个应用程序的单独导航栏，只有当用户点击个人资料页面时才会显示此路由器\导航。

//profile.js

export class Profile {

//Business logic related stuff, interact with services, etc
//then
configureRouter(config, router){
    config.map([
        {
            route:["","about-me"] , 
            moduleId:"profile/about-me", 
            title: "About Me",
            name : "about-me",
            nav:true
        },

        {
            route:"my-travels", 
            moduleId:"profile/my-travels", 
            title: "My Travels",
            name :"my-travels",
            nav:true
        },

    ]);
    this.router = router;
}

}

//profile.html
<div class="panel panel-body">
    <div class="wizard text-center">
        <a repeat.for="row of router.navigation"
           class="${row.isActive ? 'active' : ''}"
           href.bind="row.href">${row.title}</a>
    </div>
    <router-view></router-view>
</div>

所以，如果没有看到代码，我只能提供建议。

不要担心为每个子节提供单独的导航栏和路由器类。例如，users-navbar和users-router听起来不对我（再次，我猜测没有看到代码）但是如果你只有一个users.html和users.js，你可以包含你的视图模型users.js中的逻辑AND路由器信息。然后所有users.html都会遍历已配置的路由并显示导航菜单。因此，除非用户点击将他/她链接到用户页面的链接，否则该导航菜单将不可见。

Aurelia和多级导航

1 个答案: