Router back will be return 2 previous level steps. For instance:
page1 => tab1 => tab2 => subpage1
Once press “back” on subpage 1, it will back to tab2. However, it will back to tab1 within 1 sec automatically. I am using [email protected].
index.html
<!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, viewport-fit=cover">
<meta name="theme-color" content="#007aff">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Test</title>
<link rel="stylesheet" href="framework7/framework7-bundle.min.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="app">
<div class="view view-main"></div>
</div>
<!-- Cordova library -->
<script src="cordova.js"></script>
<!-- Framework7 library -->
<script src="framework7/framework7-bundle.min.js"></script>
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- App store -->
<script src="js/store.js"></script>
<!-- App scripts -->
<script src="js/app.js"></script>
</body>
</html>
app.js
var $$ = Dom7;
var app = new Framework7({
name: store.state.system.COMPANY, // App name
theme: 'auto', // Automatic theme detection
el: '#app', // App root element
id: store.state.system.APPID,
cache: true,
panel: {
swipe: 'left',
},
view: {
iosSwipeBack: false,
preloadPreviousPage: true,
},
statusbar: {
iosOverlaysWebView: false,
},
// App store
store: store,
// App routes
routes: routes,
});
var mainView = app.views.create('.view-main', {
url: '/'
});
// handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
setTimeout(function() {
mainView.router.navigate('/page1/');
}, 2000);
});
routes.js
var routes = [
{
path: '/',
url: './index.html',
},
{
path: '/main/',
componentUrl: './pages/main.html',
tabs: [
{
path: '/tab1/',
id: 'tab1',
componentUrl: './pages/tab1.html',
},
{
path: '/tab2/',
id: 'tab2',
componentUrl: './pages/tab2.html',
},
],
},
{
path: '/subpage1/',
componentUrl: './pages/subpage1.html',
},
{
path: '/page1/',
componentUrl: './pages/page1.html',
},
// Default route (404 page)
{
path: '(.*)',
url: './pages/404.html',
},
];
page1.html
<template>
<div class="page no-navbar no-toolbar" data-name="splash-screen">
<div>Page 1</div>
</div>
</template>
<script>
export default (props, { $f7, $on }) => {
//*****************************************************************************
// page init
//*****************************************************************************
$on('pageInit', () => {
setTimeout(function() {
mainView.router.navigate('/main/tab1/');
}, 2500);
});
return $render;
}
</script>
tab1.html
<template>
<div class="tab1">
<div>Tab 1</div>
</div>
</template>
<script>
export default ( props, { $on, $update }) => {
$on('tabInit', (e, page) => {
});
return $render;
}
</script>
tab2.html
<template>
<div class="tab1">
<div>Tab 2</div>
<a href="/subpage1/" class="button button-outline">Go subpage 1</a>
</div>
</template>
<script>
export default ( props, { $on, $update }) => {
$on('tabInit', (e, page) => {
});
return $render;
}
</script>
subpage1.html
<template>
<div id="test" class="page" data-name="test">
<div class="page-content">
<!-- back icon-->
<div class="back-link-container">
<a href="#" class="link back">
<i class="icon f7-icons text-color-red size-7vw">arrow_left</i>
</a>
</div>
<div>Subpage 1</div>
</div>
</div>
</template>
<script>
export default ( props, { $on, $update }) => {
$on('pageInit', (e, page) => {
});
return $render;
}
</script>