Routable tabs stop loading all content in same time


I use routable tabs for my app and when I open the app all ajax function from each tab is loaded in same time. How to separate them to start loading when I press on specific tab?

var app = new Framework7({
  routes: routes,
  view: {
    unloadTabContent: false,
    componentCache: false,
    xhrCache: false,
var routes = [
    path: '/',
    url: './index.html',
    path: '/catalog/',
    url: './pages/catalog.html',
    on: {
      pageInit: function(event, page) {
        //ajax runing in same time with homepage + 2 more tab pages


<div class="views tabs safe-areas">
  <div class="toolbar toolbar-bottom tabbar-labels tabbar lamp-tabbar tabbar-highlight">
    <div class="toolbar-inner">
      <a href="#view-home">home</a>
      <a href="#view-catalog">catalog</a>
      .. + 3 more tabs, all loading from begining

  <div id="view-home" class="view view-main view-init tab tab-active" data-name="home">
    <div class="page" data-name="home">...</div>

  <div id="view-catalog" class="view view-init tab" data-name="catalog" data-url="/catalog/"></div>


  <div class="page" data-name="catalog">
    <div class="navbar">...</div>
    <div class="page-content infinite-scroll-content" data-infinite-distance="50" @infinite="loadMore">....</div>