带有子项目的 Aurelia 侧边导航

Question

我有一个 Aurelia 应用程序，并且可以使用 AdminLTE 主题。但是，我想使用带有展开和显示子项目的顶级项目的侧边导航。

对于 Aurelia，我不确定要采取什么方法来做到这一点，因为绑定到路由仅提供 1 级导航。有没有办法从一个路由集合中绑定多级导航？

例如，我的路线如下所示：

config.map([
        { route: ['','welcome'], name: 'welcome',     moduleId: 'welcome',          nav: true,  title: 'Welcome',      auth:true, settings: {icon: 'fa fa-home'}},
                { route: '/case/',       name: 'case',        moduleId: './case/search',    nav: true,  title: 'Cases',        auth:true, settings: {icon: 'fa fa-search'}},
                { route: '/case/recent', name: 'recent-case', moduleId: './case/recent',    nav: true,  title: 'Recent Cases', auth:true, settings: {icon: 'fa fa-search'}},
                { route: '/analysis',    name: 'analysis',    moduleId: './analysis/home',  nav: true,  title: 'Analysis',     auth:true},
                { route: '/transfer',    name: 'transfer',    moduleId: './transfer/home',  nav: true,  title: 'Transfer',     auth:true},
        { route: '/auth/login',  name: 'login',       moduleId: './auth/login',     nav: false, title: 'Login'},
                { route: '/auth/logout', name: 'logout',      moduleId: './auth/logout',    nav: false, title: 'Logout' }
                ]);

我希望我的案例/最近的导航项出现在侧边菜单的顶级导航项“案例”下，如下所示：

目前在router中循环的item只有一层，是否可以嵌套路由来支持多一层的导航？

Answer 1

如果您需要显示嵌套路由，您仍然需要将所有路由甚至嵌套在路由器配置中作为普通数组。要将它们显示为树，您只需订阅 router.navigation 并使用 settings 对象以您更喜欢的方式将其转换为所需的树。

<mytree source.bind="transformToTree(router.navigation)"></mytree>