Aurelia/Bootstrap：路由时在导航栏中制作下拉菜单答案

【问题标题】：Aurelia/Bootstrap: Making a dropdown menu in a nav bar when routingAurelia/Bootstrap：路由时在导航栏中制作下拉菜单
【发布时间】：2016-03-21 02:39:10
【问题描述】：

我正在尝试在Aurelia 应用程序中的nav bar 中实现引导下拉菜单。我使用的是相当标准的 Bootstrap 代码，目前没有什么花哨的。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    ...
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Artists
      </a>
      <ul class="dropdown-menu">
        <li><a href="#/artists">All</a></li>
        <li><a href="#/artists/incomplete">Incomplete</a></li>
      </ul>
    </li>
    ...
  </ul>
</div>

问题在于菜单标题项中的href="#"。我有一个路由器和一个# 的路由。当我单击链接时，它会转到该路线。不足为奇，但这显然不是我想做的；我想显示我的下拉菜单。

我不知道在这里做什么。 href="" 导致应用程序刷新。在其中放置一个假路由会在 JavaScript 端引发错误，并且仍然不显示菜单。

【问题讨论】：

“我有一个# 的路由器”是什么意思？你的代码适合我
这是我的 app.js：导出类 App { configureRouter(config, router) { config.title = 'Song Charts'; config.map([ { route: ['','welcome'], name: 'welcome', moduleId: 'welcome', title: 'Welcome' }, { route: 'artists', name: 'artists', moduleId : 'artists', title: 'Artists' }, { route: 'artists/incomplete', name: 'incomplete-artists', moduleId: 'incomplete-artists', title: 'Incomplete Artists' }, ... this.路由器 = 路由器；} }
您可以使用 a 以外的其他元素，但不要使用 href 属性。
这使用 Bootstrap。 button 搞乱了格式。
我认为引导程序的 javascript 停止了点击事件的传播，以防止此类事情发生。其他引导功能是否正常工作（例如工具提示）？

标签： twitter-bootstrap aurelia

【解决方案1】：

添加：

import 'bootstrap';

到你的主文件。

【讨论】：