Aurelia：创建嵌套/多级导航菜单的简单方法

我需要创建一个多级导航菜单。菜单的内容根据用户的不同而不同。我计划通过一个以 JSON 形式返回数据的服务来提取可包含子项数组的导航项集合。我见过的每个导航/路由示例都使用静态路由或单级菜单。我已经阅读了一些有关子路由的内容，但这似乎不是我所需要的。我唯一能想到的是创建一个自定义导航元素，其模型将使用导航项集合中的数据在普通数组中注册路线。然后，我将使用该集合来呈现 HTML，而不是使用路由器，因为它包含层次结构信息。有没有更简单的方法来做到这一点。这是我使用的第一个 JS 框架，所以我正在努力加快速度。

实际上，这相当容易。您只需将属性添加到路线的settings目的。您可以将其命名为任何您想要的名称。它将包含子菜单的菜单项集合。只需使用它来构建子菜单即可。

这是一个例子：https://gist.run?id=beb5ba9155fdb2ccefcf78676879b1ca https://gist.run?id=beb5ba9155fdb2ccefcf78676879b1ca

app.html

<template>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
      <ul>
        <li repeat.for="sub of row.settings.subRoutes">
          <a route-href="route.bind: row.config.name; params.bind: sub.params">${sub.name}</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

app.js

import {activationStrategy} from 'aurelia-router';

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { 
        route: ['', 'one'], 
        name: 'one',      
        moduleId: 'one',      
        nav: true, 
        title: 'Page 1',
        activationStrategy: activationStrategy.invokeLifecycle,
        settings: {
          subRoutes: [
            {
              name: 'Sub-choice 1',
              params: {
                'foo': 'bar'
              }
            },
            {
              name: 'Sub-choice 2',
              params: {
                'foo': 'two'
              }
            }
          ]
        }
      },
      { route: 'two',         name: 'two',        moduleId: 'two',        nav: true, title: 'Page 2' }
    ]);

    this.router = router;
  } 
}

one.html

<template>
  Page One<br />
  Params:<br />
  <pre><code>${params}</code></pre>
</template>

one.js

export class One {
  activate(params) {
    this.params = JSON.stringify(params);
  }
}

您传递的参数可以是您喜欢的任何参数。例如，它们可能是有关应在您要去的路线上的子路由器上激活什么路线的信息。你可以打电话router.navigate...在页面的激活方法中（one.js在下面的示例中）导航到子路由器上的正确路由。您确实可以做任何您想做的事情，因为您可以将任何您想要的旧东西放在该设置对象上。