Strange behaviour, easy to reproduce.
Bad behaviour : after selecting another tab (tab 2 or tab3), routing become crazy and tabs don’t work anymore
index.html contain :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>My App 2</title>
<link rel="stylesheet" href="framework7/css/framework7.min.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main ios-edges">
<!-- Page, data-name contains page name which can be used in callbacks -->
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title sliding">My App 2</div>
</div>
</div>
<div class="toolbar toolbar-bottom-md tabbar">
<div class="toolbar-inner">
<a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
<a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
<a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
</div>
</div>
<div class="tabs tabs-routable">
<div class="page-content tab" id="tab1"></div>
<div class="page-content tab" id="tab2"></div>
<div class="page-content tab" id="tab3"></div>
</div>
</div>
</div>
</div>
<!-- Framework7 library -->
<script src="framework7/js/framework7.min.js"></script>
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- Your custom app scripts -->
<script src="js/app.js"></script>
</body>
</html>
app.js contain
// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
root: '#app', // App root element
id: 'io.framework7.testapp', // App bundle ID
name: 'Framework7', // App name
theme: 'auto', // Automatic theme detection
// App routes
routes: routes,
});
// Init/Create main view
var mainView = app.views.create('.view-main', {
url: '/'
});
route.js contain
routes = [
{
// Page main route
path: '/',
// Will load page from tabs/index.html file
url: './index.html',
// Pass "tabs" property to route, must be array with tab routes:
tabs: [
{
path: '/',
id: 'tab1',
content: ' \
<div class="block"> \
<p>Tab 1 content</p> \
</div> \
',
},
{
path: '/tab2/',
id: 'tab2',
content: '\
<div class="block"> \
<p>Tab 2 content</p> \
</div> \
',
},
{
path: '/tab3/',
id: 'tab3',
content: '\
<div class="block"> \
<p>Tab 3 content</p> \
</div> \
',
},
],
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
];