Bug in tabs-routable when tabs-routable is on root screen

Strange behaviour, easy to reproduce.

Bad behaviour : after selecting another tab (tab 2 or tab3), routing become crazy and tabs don’t work anymore

index.html contain :

<!DOCTYPE html>
  <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, minimal-ui, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#2196f3">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <title>My App 2</title>

  <link rel="stylesheet" href="framework7/css/framework7.min.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/app.css">
  <div id="app">
    <!-- Status bar overlay for fullscreen mode-->
    <div class="statusbar"></div>

    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main ios-edges">
      <!-- Page, data-name contains page name which can be used in callbacks -->
      <div class="page" data-name="home">
        <!-- Top Navbar -->
        <div class="navbar">
          <div class="navbar-inner">
            <div class="left">
              <a href="#" class="link icon-only panel-open" data-panel="left">
                <i class="icon f7-icons ios-only">menu</i>
                <i class="icon material-icons md-only">menu</i>
            <div class="title sliding">My App 2</div>

					  <div class="toolbar toolbar-bottom-md tabbar">
					    <div class="toolbar-inner">
					      <a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
					      <a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
					      <a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
					  <div class="tabs tabs-routable">
					    <div class="page-content tab" id="tab1"></div>
					    <div class="page-content tab" id="tab2"></div>
					    <div class="page-content tab" id="tab3"></div>



  <!-- Framework7 library -->
  <script src="framework7/js/framework7.min.js"></script>

  <!-- App routes -->
  <script src="js/routes.js"></script>

  <!-- Your custom app scripts -->
  <script src="js/app.js"></script>

app.js contain

// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app  = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  // App routes
  routes: routes,

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/'

route.js contain

 routes = [

    // Page main route
    path: '/',
    // Will load page from tabs/index.html file
    url: './index.html',
    // Pass "tabs" property to route, must be array with tab routes:
     tabs: [
        path: '/',
        id: 'tab1',
        content: ' \
        <div class="block"> \
          <p>Tab 1 content</p> \
        </div> \
        path: '/tab2/',
        id: 'tab2',
        content: '\
        <div class="block"> \
          <p>Tab 2 content</p> \
        </div> \
        path: '/tab3/',
        id: 'tab3',
        content: '\
        <div class="block"> \
          <p>Tab 3 content</p> \
        </div> \
  // Default route (404 page). MUST BE THE LAST
    path: '(.*)',
    url: './pages/404.html',

Hi Olivier,

Just your links to the following:

<a href="/" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
<a href="/tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
<a href="/tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>

With / in the beginning