如何使用Aurelia的路由器定义和渲染子菜单项 [英] How to define and render submenu-items, using Aurelia's Router

问题描述

在Aurelia应用程序中，我定义了一个这样的简单路线：

  configureRouter（config：RouterConfiguration，router：路由器）{
 config.title ='Marino'; 
 config.map（[
 {route：[''，'home']，name：'home'，moduleId：'./ pages / home / home'，nav：true，title：' Home'}，
 {route：'colors'，name：'colors'，moduleId：'./ pages / colours / overview'，nav：true，title：'Colors'} 
]）; 
 
 this.router = router; 
} 
  

通过实现repeat.for和href，这与所有示例完美相同.bind喜欢这样：

 < ul class =main-navigation> 
< li repeat.for =row.navigation的行class =$ {row.isActive？'active'：''}> 
< a class =btn btn-primaryhref.bind =row.href> $ {row.title}< / a> 
< / li> 
< / ul> 
  

我的方案中的挑战是我想使用子菜单项动态呈现路线也是这个菜单。这样的事情：

 < ul class =main-navigation> 
 
<！ - 常规'常规'菜单，工作得很好 - > 
< li repeat.for =row.navigation的行class =$ {row.isActive？'active'：''}> 
< a class =btn btn-primaryhref.bind =row.href> $ {row.title}< / a> 
< / li> 
 
<！ -  
以下是泡菜;一种不同的元素（不可点击），
但带有子元素
  - > 
 
< li class =main-navigation-dropdown> 
< a class =btn btn-primary>菜单包含子菜单项< / a> 
< div class =horizo​​ntal-dropdown-menu> 
< a class =btn btn-primary sideline>子菜单1< / a> 
< a class =btn btn-primary sideline>子菜单2< / a> 
< a class =btn btn-primary sideline>子菜单3< / a> 
< / div> 
< / li> 
< / ul> 
  

令我困惑的是两件事：

1. 如何正确定义路线配置中的子菜单项？


2. 如何有条件地将每条路线渲染为常规（可点击）路线，或者作为具有子菜单的不可点击的项目？

我查看了 RouteConfig docs 但似乎找不到任何关于'嵌套'子路径。 Aurelia入门指南确实提供了有关子路线的信息，但在我看来，所有样本与在其他组件上显示其他或第二个菜单有关。

I我相信这很简单，但我似乎无法解决它。

解决方案

您遇到的问题是子路由倾向于使用子路由器。

这样可以在Aurelia中实现一些非常强大的场景，但是在您导航到子路径之前，可能会出现路线配置可能不存在的挑战。

我之前通过证明一个路由服务将路由树表示为一个单一对象，并使用一些辅助方法将部分转换为Aurelia可以使用的路由配置对象来处理这种情况。 / p>

然后将其注入子模块并查询它以配置路由器

导航菜单组件可以然后看看这个树，在任何子模块被加载之前构建菜单结构。

Mike Graham也做了类似的事情，但他只是预先设置了所有的路由配置（在路由配置上使用level变量来确定菜单层次结构）：

Aurelia：子路由器路由显示在main中。 app.html中的导航栏和子视图< router-view>元素？

这种方法的缺点是你需要提前知道子模块才能配置路由器。 （子路由器的一部分功能是它们可以在运行时注册，并且可以放入而无需在托管应用程序中的任何其他位置进行任何配置 - 这否定了这一优势）

上述方法的缺点是你不能轻易地使用路由器生成路由href（因为它使用父亲来计算相对href是什么），你最终必须自己构建navmodel。 / p>

In an Aurelia app, I've defined a simple route like this:

configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'Marino';
    config.map([
        { route: ['', 'home'], name: 'home', moduleId: './pages/home/home', nav: true, title: 'Home' },
        { route: 'colors', name: 'colors', moduleId: './pages/colors/overview', nav: true, title: 'Colors' }
    ]);

    this.router = router;
}

This works perfectly as all the examples mention, by implementing repeat.for and href.bind like this:

<ul class="main-navigation">
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a class="btn btn-primary" href.bind="row.href">${row.title}</a> 
    </li>
</ul>

The challenge in my scenario is that I want to dynamically render routes with submenu-items to this menu as well. Something like this:

<ul class="main-navigation">

    <!-- the regular 'regular' menu and works just fine -->
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a class="btn btn-primary" href.bind="row.href">${row.title}</a> 
    </li>

    <!-- 
        below is the pickle; a different kind of element (non-clickable),
        but with child elements
    -->

    <li class="main-navigation-dropdown">
        <a class="btn btn-primary">Menu with Submenu-items</a> 
        <div class="horizontal-dropdown-menu">
            <a class="btn btn-primary sideline">Submenu 1</a> 
            <a class="btn btn-primary sideline">Submenu 2</a> 
            <a class="btn btn-primary sideline">Submenu 3</a> 
        </div>
    </li>                            
</ul>

What puzzles me are two things:

1. How do I properly define the submenu-items in the route config?
2. How can I conditionally render each route as either a regular (clickable) route, or as a non-clickable item with submenu's?

I've looked in the RouteConfig docs but can't seem to find any info on 'nested' subroutes. The Aurelia Getting Started does provide info about child routes, but all the samples seem to me to be related to displaying "other", or second menu's on another component.

I'm sure it's quite trivial, but I just can't seem to get a fix on it.

解决方案

The problem you have is that sub routes tend to use child routers.

This enables some pretty powerful scenarios in Aurelia but presents the challenge that your route configuration might not be present until you have navigated to a child route.

I've handled this scenario before by proving a routing service that surfaces a routing tree as a single object with some helper methods to transform parts of this into a route config object which Aurelia can consume.

This is then injected into the sub modules and they query it to configure the router

The nav menu component can then look at this tree to build the menu structure ahead of any child modules being loaded.

Mike Graham also does a similar thing but he just sets all the route config up front (using a "level" variable on the route config to determine the menu heirarchy):

Aurelia: child router routes display in "main" nav-bar and child view in app.html <router-view> element?

The disadvantage to that approach is that you need to know about submodules ahead of time in order to configure the router. (part of the power of child routers is that they can just register at runtime and can be "dropped in" without any config anywhere else in the hosting app - this negates that advantage)

The disadvantage of the aforementioned approach is that you can't really generate route hrefs using the router easily (since it uses the parent to figure out what the relative href is) and you end up having to build the navmodel yourself.

这篇关于如何使用Aurelia的路由器定义和渲染子菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！