我收到错误[app-router]错误:当尝试在Aurelia中导航到HTML中的href时，找不到路由: /pane02

Question

我试图插入一个导航标签，当用户单击Pane5时，它将显示在主标签下面，但当我单击子元素(Pane01或Pane02)时，我收到应用路由器错误。这是不是因为嵌套引导而发生的？

​

下面是一个如何在页面中构建HTML的示例：

<template>

      <div>

        <div class="row">
          <div class="col-lg-12">
            <div class="row">
              <div class="col-lg-6">
                <h3 class=""><span t="asset_details"></span>SomeElement</h3>
              </div>
              <div class="col-lg-6">
                <a class="pull-right"><i class="fa fa-window-close fa-2x"></i></a>
              </div>
            </div>
            <div class="row">
              <ul class="nav nav-pills"> 
                <li><a data-toggle="tab" href="#pane1"><span>Details</span></a></li>
                <li><a data-toggle="tab" href="#pane2"><span>Details</span></a></li>
                <li><a data-toggle="tab" href="#pane3"><span>Other</span></a></li>
                <li><a data-toggle="tab" href="#pane4"><span>Element</span></a></li>
                <li><a data-toggle="tab" href="#pane6"><span>Element</span></a></li>
                <li><a data-toggle="tab" href="#pane5"><span>Element</span></a></li>
              </ul>
              <div class="tab-content">

                <div class="tab-pane active" id="pane1">
                  <div class="col-lg-12">
                    <div class="row">
                      <div class="col-lg-4">
                      </div>

                      <div class="col-lg-8">
                        <div class="row">
                          <div class="col-lg-6">
                            <compose>
                            </compose>
                          </div>
                          <div class="col-lg-6">
                            <compose></compose>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-12">
                            <compose></compose>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>

                </div>

                <div class="tab-pane" id="pane2">
                  <div class="col-lg-12">
                    <div class="row">
                      <div class="col-lg-12">
                        <!--<commercial-line device-id.bind="deviceId"></commercial-line>-->
                        <compose></compose>
                      </div>

                    </div>

                  </div>
                </div>
                <div class="tab-pane" id="pane3">
                  <div class="col-lg-12">
                    <div class="row">
                      <div class="col-lg-6">
                        <compose></compose>
                      </div>
                      <div class="col-lg-6">
                        <compose></compose>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="tab-pane" id="pane4">
                  <div class="col-lg-12">
                    <div class="row">
                      <div class="col-lg-12">
                        <compose></compose>
                      </div>

                    </div>
                  </div>
                </div>

                <div class="tab-pane" id="pane5">
                  <div class="col-lg-12">
                    <div class="row">
                      <div class="col-lg-12">

                        <ul class="nav nav-pills">
                          <li class="active"><a href="#pane01"><span>History</span></a></li>
                          <li if.bind="!history"><a href="#pane02"><span>Param</span></a></li>
                        </ul>

                <div class="tab-content">
                  <div class="tab-pane active" id="pane01">
                      <div class="col-lg-12">
                          <div class="row">
                              <table class="table table-hover table-condensed" ref="theTable">
                                  <thead>
                                      <th>
                                        <span>Afla</span>
                                      </th>
                                      <th class="col-lg-2">
                                        <span>Beta</span>
                                      </th>
                                      <th>
                                        <span>Gama</span>
                                      </th>
                                      <th>
                                        <span>Gama</span>
                                      </th>
                                      <th>

                                      </th>
                                    </thead>
                                    <tbody>
                                      <tr repeat.for="element of Array">
                                        <td>
                                          <span>${element.first}</span>
                                        </td>
                                        <td class="col-lg-2">
                                          <span >${element.second}</span>                            
                                        </td>
                                        <td>
                                          <span>${element.third}</span>
                                        </td>
                                        <td>
                                          <span>${element.fourth}</span>
                                        </td>
                                        <td >      
                                          <span>${element.fifth}</span>
                                        </td>
                                      </tr>
                                    </tbody>
                              </table>
                          </div>
                      </div>
                  </div>


                  <div class="tab-pane" id="pane02">
                      <div class="col-lg-12">
                          <div class="row"> 
                              <div class="col-lg-12">
                                  <table class="table table-hover table-condensed">
                                      <thead>
                                          <th>
                                            <span>Alfa</span>
                                          </th>
                                          <th>
                                            <span>Beta</span>
                                          </th>
                                          <th>
                                            <span>Gama</span>
                                          </th>
                                          <th>
                                            <span>Gama</span>
                                          </th>
                                          <th>
                                            <span>Example</span>
                                          </th>
                                          <th>
                                            <span>Inte</span>
                                          </th>
                                        </thead>
                                        <tbody>
                                          <tr repeat.for="item of array">
                                            <td>
                                              <span date-time>${item.date}</span>
                                            </td>
                                            <div class="divider"></div>
                                            <td>
                                              <span date-time>${item.date2}</span>
                                            </td>
                                            <td>
                                              <span>${item.user}</span>
                                            </td>
                                            <td>
                                              <span>${item.array1}</span>
                                            </td>
                                            <td>
                                              <span>${item.array2}</span>
                                            </td>

                                        </tbody>
                                  </table>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
                      </div>
                    </div>
                  </div>

                </div>
                <div class="tab-pane" id="pane6">
                  <div class="col-lg-12">
                    <div class="row">
                      <div class="col-lg-12">
                        <compose view-model="view-model">
                        </compose>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            </div>
            </div>
            </div>
    </template>

Answer 1

向a标记添加一个router-ignore属性。这样aurelia将不会激活单击您的链接的路由逻辑。

有关该主题的更多信息，请参阅文档：https://aurelia.io/docs/routing/handling-links#basic-concept

Answer 2

Bootstrap中href的替代方法是data-target。因此，如果你想这样做：

<a href="#panel-1">

那么你可以改为这样做：

<a data-target="#panel-1">

它们是相同的。data-target的优点是它可以支持多个选择器