Init event firing twice

Questions
1

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: {

},
touch:{
   fastClicks:true,
},
// App routes
routes: routes,
});

$$(document).on('page:init','.page[data-name="addtask"]',function(e,page){
console.log(page);

});

what could possibly go wrong?

2

Best way catch events initialization page use routes

https://framework7.io/docs/routes.html#route-events

3

i modified route.js ,

{
path:'/',
component:MemoScreen,
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');
    },
  }

but

image
image.png1366×728 49.2 KB

Now can you give me some suggestion on it

4
5

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

<!DOCTYPE html>
<html>
<head>
 <title>hii</title>
 <meta charset="utf-8">
 <!--
 Customize this policy to fit your own app's needs. For more guidance, see:
  https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-  security-policy
 Some notes:
 * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com 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">
  <title>Sapora</title>
  <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 -->
</head>
 <body>
 <div id="app">
  
<!-- Your main view, should have "view-main" class -->
<div class="view view-main view-init safe-areas" data-url="/"></div>
    </div>
   <!-- built script files will be auto injected -->
   </body>
  </html>
6

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

data-url="/main"

7

thanks, now it’s working as expected

8

I meet this problem twice. For those with unsolved problems. check it out the router inside the tabs, and the path:"(.*)"