Not working of router.navigate

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>
var self   = this;
        var router = self.$router;
        setTimeout(function() {
          app.views.main.router.navigate("/logon-screen/");
          console.log('Go to logon-screen');
        }, 2000);

It should be

var self   = this;
        var router = self.$router;
        setTimeout(function() {
          router.navigate("/logon-screen/");
          console.log('Go to logon-screen');
        }, 2000);

I have tried to use “app.views.main.router.navigate” & “router.navigate”

Thanks for your replied! I have already used “router.navigate” but still cannot work.

Create a minimal reproduction example using template from here How to ask a good question on forum

I solved the problem by add timeout on execution “router.navigate” on “app.js”.

setTimeout(function() {
  app.views.main.router.navigate('/splash-screen/');
}, 3000);