Using framework7 Object

Questions
1

Hello,

I am facing the question how can I access the framework7 object from my routers.js file. Because the routers.js is imported before the object is created.

Here is my code:

app.js

import $ from 'dom7';
import Framework7, { getDevice } from 'framework7/bundle';

// Import F7 Styles
import 'framework7/css/bundle';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import Cordova APIs
import cordovaApp from './cordova-app.js';

// Import Storage
import storage from './storage.js';
// Import Routes
import routes from './routes.js';

// Import Routes
import spotUpdater from './spotUpdater.js';

// Import main app component
import App from '../app.f7';

var device = getDevice();
var app = new Framework7({
  name: 'Collectors Hub', // App name
  theme: 'auto', // Automatic theme detection
  el: '#app', // App root element
  component: App, // App main component
  // App routes
  routes: routes,
  storage: storage,
  spotUpdater: spotUpdater,
  // Input settings
  input: {
    scrollIntoViewOnFocus: device.cordova,
    scrollIntoViewCentered: device.cordova,
  },
  // Cordova Statusbar settings
  statusbar: {
    iosOverlaysWebView: false,
    androidOverlaysWebView: false,
  },
  on: {
    init: function () {
      var f7 = this;
      if (f7.device.cordova) {
        // Init cordova APIs (see cordova-app.js)
        cordovaApp.init(f7);
      }
    },
    pageInit: function() {
      console.log('PageInit');
      let spots = new spotUpdater();
      spots.fetch();

      let storageClass = new storage();
      $('#lastSyncState').html(storageClass.get('last_updated'));

    },
    refresh: function() {
      console.log('pullMove 2');
      let storageClass = new storage();
      $('#lastSyncState').html(storageClass.get('last_updated'));
    }
  },
});

routes.js


import HomePage from '../pages/home.f7';
import CatalogPage from '../pages/catalog.f7';
import SettingsPage from '../pages/settings.f7';
import NotFoundPage from '../pages/404.f7';
import spotUpdater from "@/js/spotUpdater";
import storage from "@/js/storage";
import $ from 'dom7';
import App from "@/app.f7";


var routes = [
  {
    path: '/',
    component: HomePage,
    on: {
      pageInit: function() {
        let spots = new spotUpdater();

        let storageClass = new storage();
        $('#lastSyncState').html(storageClass.get('last_updated'));

        var $ptrContent = $('.ptr-content');
        $ptrContent.on('ptr:refresh', function (e) {
          console.log('pullMove');
          /* Fetch new data first */
          spots.fetch()
          let storageClass = new storage();
          $('#lastSyncState').html(storageClass.get('last_updated'));
          App.ptr.done(); // or e.detail();
        });
      }
    }
  },
  {
    path: '/catalog/',
    component: CatalogPage,
  },
  {
    path: '/settings/',
    component: SettingsPage,
  },
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

export default routes;