Router to back page fired twice

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>

Because you have this:

change pageInit to pageAfterIn

1 Like

You are my sunshine.

1 Like

Sunshine and creator lol