How to keep routable tab content after navigations

F7 Version: v8.3.0


const routes = [
    path: '/',
    url: './pages/layout.html',
    tabs: [
        path: '/',
        id: 'tab-1',
        componentUrl: './pages/home.html',
        path: '/tab-2/',
        id: 'tab-2',
        componentUrl: './pages/tab.html',
        path: '/tab-3/',
        id: 'tab-3',
        componentUrl: './pages/user.html',
    keepAlive: true

  //other routes...


const app = new Framework7({
  el: '#app',
  view: {
    iosSwipeBack: false,
    xhrCache: false,
    unloadTabContent: false,
  routes: routes,

<div class="page no-navbar">
  <div class="toolbar tabbar toolbar-bottom page-tabbar">
    <div class="toolbar-inner">
      <a href="/" class="tab-link" data-route-tab-id="tab-1">
        <i class="icon-line2-home"></i>
      <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">
        <i class="icon-line2-emoticon-smile"></i>
      <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">
        <i class="icon-line2-user"></i>
  <div class="tabs tabs-routable tabs-swipeable-wrap">
    <div class="tab page-content" id="tab-1"></div>
    <div class="tab page-content" id="tab-2"></div>
    <div class="tab page-content" id="tab-3"></div>


  1. Switch to tab-3, navigate 2 new routes on that page (2 page level deeper).
  2. Navigate back to the root Tabs page.
  3. Problem occurs:
    ● tab-3 is active (OK)
    ● Content of tab-3 gets removed (NOT OK)
    Now switch to tab-1 OR tab-2:
    ● Content of tab-1 AND tab-2 gets removed, event “tabInit” fires (NOT OK)

How to keep tab-1 & tab-2 & tab-3 state after deep navigation.
I tried to set keepAlive: true && unloadTabContent: false with no luck.

Any help is appreciated!

Solved. Switched to Tabbed Views layout.