Tabs-routable not working

Questions
1

I’m currently using this code:
HTML

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>My App</title>

  <link rel="stylesheet" href="css/framework7.bundle.css">
  <link rel="stylesheet" href="css/my-app.css">
  <link rel="stylesheet" href="components/tabs.css">
</head>

<body>


  <div id="app">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">About Me</div>
        </div>
      </div>
      <div class="toolbar tabbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="/" class="tab-link" data-route-tab-id="about">About</a>
          <a href="/contacts/" class="tab-link" data-route-tab-id="contacts">Contacts</a>
          <a href="/cv/" class="tab-link" data-route-tab-id="cv">CV</a>
        </div>
      </div>
      <div class="tabs tabs-routable">
        <div class="tab page-content" id="about"></div>
        <div class="tab page-content" id="contacts"></div>
        <div class="tab page-content" id="cv"></div>
      </div>
    </div>

  </div>




  <!-- Path to Framework7 Library JS-->
  <script type="text/javascript" src="js/framework7.js"></script>

  <script type="text/javascript" src="components/calendar.js"></script>
  <script type="text/javascript" src="components/tabs.js"></script>
  <!-- <script type="text/javascript" src="components/dialog.js"></script> -->

  <script type="text/javascript" src="js/my-app.js"></script>

</body>

</html>

JavaScript:

var app = new Framework7({
    name: 'My App',
    id: 'com.myapp.test',
    routes: [
        {
            path: '/',
            url: 'index.html',
            tabs: [
                {
                    path: '/',
                    id: 'about',
                    content: `
            <div class="block">
              <h3>About Me</h3>
              <p>...</p>
            </div>
          `
                },
                {
                    path: '/contacts/',
                    id: 'contacts',
                    content: `
            <div class="block">
              <h3>contakt Me</h3>
              <p>...</p>
            </div>
          `
                },
                {
                    path: '/cv/',
                    id: 'cv',
                    content: `
            <div class="block">
              <h3>CV Me</h3>
              <p>...</p>
            </div>
          `
                },
            ],
        }
    ]
});

The tab bar is simply not responding to my clicks - I’m not being routed at all. What am I missing here?

2

I have this issue too. Anyone with any solution?

3

It doesn’t work too, I read that maybe a main view is missing but I don’t know how to insert it.

4

After two, or more, hours I’ve find out that for tabs to work I NEED TO have slash at the end of link and path setting in routes!

<a href="/routetestpath/">Test link</a>

  path: '/routetestpath/',
  componentUrl: 'js/components/test.html',
  tabs: [{
    path: '/',
    id: 'tab1',
    content: '<div class="block"><h3>About Me</h3></div>'
  }]