I have tried to use “app.views.main.router.navigate” & “router.navigate” on component url page but no succeed. But it works on “app.js”. It just showed the “splash-screen” page. Cannot showed up “logon-screen” after 2 secs. Could anyone help me? Thanks in advanced.
Regards,
app.js
// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'Happy Meal',
// App id
id: 'com.test.happymeal',
cache: true,
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: routes,
view: {
iosSwipeBack: false,
preloadPreviousPage: false,
},
statusbar: {
iosOverlaysWebView: false,
},
});
var mainView = app.views.create('.view-main', {
url: '/'
});
// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
onDeviceReady();
});
// Handle "Back Button" action
function onDeviceReady() {
}
app.views.main.router.navigate('/splash-screen/');
routes.js
routes = [
{
path: '/',
url: './index.html',
},
{
path: '/splash-screen/',
componentUrl: './pages/splash-screen.html',
},
{
path: '/logon-screen/',
componentUrl: './pages/logon-screen.html',
},
// Default route (404 page).
{
path: '(.*)',
url: './pages/404.html',
},
];
splash-screen.html
Show the “splash-screen”, then load “logon-screen” after 2 secs (timeout).
<template>
<div class="page no-navbar no-toolbar splash-screen" style="background:white;" data-name="splash-screen">
<div><img class="center-align" src="image/system/logo-frame-orange.png" style="width:40vw;" /></div>
</div>
</template>
<style>
</style>
<script>
return {
data: function() {
},
on: {
pageInit: function(page) {
var self = this;
var router = self.$router;
setTimeout(function() {
app.views.main.router.navigate("/logon-screen/");
console.log('Go to logon-screen');
}, 2000);
},
},
methods: {
},
}
</script>
logon-screen.html
Finally, the “logon-screen” didn’t show up
<template>
<div class="page no-navbar no-toolbar logon-screen" style="background:orange;" data-name="logon-screen">
<div><img class="center-align" src="image/system/logo-frame-white.png" style="width:40vw;" /></div>
</div>
</template>
<style>
</style>
<script>
return {
data: function() {
},
on: {
pageInit: function(page) {
var self = this;
var router = self.$router;
},
},
methods: {
},
}
</script>