我遇到错误[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>

[我试图插入一个导航选项卡，当用户单击Pane5时，该导航选项卡将显示在主选项卡的下面，但是当我单击子元素（Pane01或Pane02）时，出现应用程序路由器错误。 ...

Answer 1

向您的router-ignore标签添加a属性。因此aurelia不会激活您在链接上单击的路由逻辑。

Answer 2

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