Init event firing twice

In my framework 7 app, every page has been firing init event twice. my app.js file is,

import $$ from 'dom7';
import Framework7 from 'framework7/framework7.esm.bundle.js';
import 'framework7-icons';
import 'capacitor-secure-storage-plugin';  
import { Plugins } from '@capacitor/core';

const { SecureStoragePlugin } = Plugins;
import 'framework7/css/framework7.bundle.css';
import '../css/app.css';
import routes from './routes.js';

var app = new Framework7({
   root: '#app', // App root element

   name: 'Sapora', // App name
   theme: 'auto', // Automatic theme detection
   // App root data
   data: function () {
   return {

// App root methods
methods: {

// App routes
routes: routes,



what could possibly go wrong?

Best way catch events initialization page use routes

i modified route.js ,

on: {
    pageBeforeIn: function (event, page) {
      console.log('before in');
    pageAfterIn: function (event, page) {
      console.log('after in');
    pageInit: function (event, page) {
      console.log('init method');
    pageBeforeRemove: function (event, page) {
      console.log('before remove');


Now can you give me some suggestion on it

Just checked my index.html, it only contains one view

<!DOCTYPE html>
 <meta charset="utf-8">
 Customize this policy to fit your own app's needs. For more guidance, see:  security-policy
 Some notes:
 * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
  * Enable inline JS: add 'unsafe-inline' to default-src
<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="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">
  <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
  <link rel="icon" href="static/icons/favicon.png">

     <!-- built styles file will be auto injected -->
 <div id="app">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main view-init safe-areas" data-url="/"></div>
   <!-- built script files will be auto injected -->

I understood why you have problems, when you load the page, you load the “real” path, and then you load the page in the router, just use another path


thanks, now it’s working as expected