Checked answers to similar from the past year and don’t see the solution.
tab-1 is inline page content and that works. Pressing on the second tab which is a standard url page/path gets the 404 page. Pressing on the third tab which is a componentUrl gets the 404 as well.
v8.3.4 and my app is in /app/ on the domain rather than root. I tried BrowserHistoryRoot but did not see an affect. You can try the tabs at [https://fling.photo/app/](Fling Photo)
made a tabs.html file
<div class="page">
<div class="navbar navbar-bottom">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Routable Tabs</div>
</div>
</div>
<div class="toolbar tabbar toolbar-top">
<div class="toolbar-inner">
<!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
<a href="/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
<a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
<a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
</div>
</div>
<!-- Additional "tabs-routable" is required on tabs -->
<div class="tabs tabs-routable">
<div class="tab page-content" id="tab-1"></div>
<div class="tab page-content" id="tab-2"></div>
<div class="tab page-content" id="tab-3"></div>
</div>
</div>
this is my route
var myroutes = [
{
path: '/',
ComponentUrl: './index.html',
},
{
path: '/tabs/',
// Will load page from tabs/index.html file
url: './pages/tabs.html',
tabs: [
{
// Tab path
path: '/',
// Tab id
id: 'tab-1',
// Fill this tab content from content string
content: `
<div class="block">
<h3>About Me</h3>
<p>my name is joe</p>
</div>
`
},
{
path: '/tab-2/',
id: 'tab-2',
url: './pages/home.html',
},
{
path: '/tab-3/',
id: 'tab-3',
componentUrl: './pages/capture.html',
},
],
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html'
},
];
// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
el: '#app', // App root element
id: 'fling.photo.appbeta', // App bundle ID
name: 'fling', // App name
theme: 'auto', // Automatic theme detection
// App routes
routes: myroutes,
});
I had to do set the main-view to /tabs/ to see the Routable Tab in operation.
var mainView = app.views.create('.view-main',{url: '/tabs/'});