Hi,
I’m trying to use routable-tabs for directing the user from pg1buttonB and pg1buttonC to pg2tab-B and pg2tab-C in a second page, but I do not find the way to make it work. For testing I build in a pg1 three tab-buttons linking to pg2, pg2tab-B and pg2tab-C respectively.
Standard pg2 link works properly but clicking on pg1buttonB or pg1buttonC I get the “NotFoundPage” message. So the mistake should be related to the route definition . Could someone help me to find the mistake or tell me where I can find a similar example for testing?
Here my links in pg1, pg2.f7.html with the definition of tab-B and tab-C and and the route definitions :
"
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="segmented segmented-strong">
<a href="/pg2A/" class="button item-link item-content "><i
class="icon material-icons if-md">photo_camera</i></a>
<a href="/tab-B/" class="button tab-link" data-route-tab-id="tab-B"
id="ordinaList" ><i class="icon material-icons if-md">timeline</i></a>
<a href="/tab-C/" class="button tab-link" data-route-tab-id="tab-C"
id="ordinaMap" ><i class="icon material-icons if-md">map</i></a>
<span class="segmented-highlight"></span>
</div>
</div>
</div>
<!--********************************************************************-->
<!--************************** PAGE 2************************************-->
<template>
<!-- Initial Page, "data-name" contains page name -->
<div data-name="pg2" class="page page-with-subnavbar">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="back item-link item-content">
<i class="icon f7-icons">arrowshape_turn_up_left</i>
</a>
</div>
<div class="title">Ordina</div>
</div>
</div>
<!------------------ subnavbar with tabs----------------------->
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="segmented segmented-strong">
<a href="#" class="button back" id="tabToNewiter">
<i class="icon material-icons if-md"
id="tabToNewiter">photo_camera</i></a>
<a href="/tab-B/" class="button tab-link" data-route-tab-
id="tab-B">
<i class="icon material-icons if-md">timeline</i></a>
<a href="/tab-C/" class="button tab-link" data-route-tab-id="tab-C">
<i class="icon material-icons if-md">map</i></a>
<span class="segmented-highlight"></span>
</div>
</div>
</div>
<div >Tab# </div>
<!-- Tabs Page content ---------------------->
<div class="tabs tabs-routable">
<!-- ------------------ tab-B -->
<div class="page-content tab" id="tab-B">
<div> tab-B </div>
</div>
<!-- ------------------ tab-C -->
<div class="page-content tab" id="tab-C">
<div>tab-C </div>
</div>
</div>
</div>
</template>
<script>
export default () => {
return $render;
};
</script>
//-------------------------Routes -------------
{
path: ‘/pg2A/’,
component: pg2,
options: {
animate: true,
},
},
{
path: ‘/pg2/’,
component: pg2,
tabs:
[
{
path: ‘/tab-B/’,
id: ‘tab-B’,
},
{
path: ‘/tab-C/’,
id: ‘tab-C’,
},
],
},
//--------------------------------------