Я пытаюсь вставить вкладку навигации, которая будет отображаться под основной, когда пользователь нажимает на Pane5, но когда я нажимаю на дочерний элемент (Pane01 или Pane02), я получаю ошибку app-router. Это происходит из-за вложенности bootstrap
Вот пример структуры 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>