Routable Tabs produces blank screen

Questions
1

I use F7 v5 using webpack and got problem with routable tabs. I have read many times and follow the same from this page https://framework7.io/docs/tabs.html but still not working.
Problem: It displays blank screen and other tabs cannot open/load component.
My html code is like this:

<div class="toolbar toolbar-bottom tabbar-labels">
    <div class="toolbar-inner">
      <a href="/" class="tab-link" data-route-tab-id="main">
        <i class="icon f7-icons if-not-md">square_list</i>
        <i class="icon material-icons if-md">view_list</i>
        <span class="tabbar-label">List</span>
      </a>
      <a href="/status/" class="tab-link" data-route-tab-id="status">
        <i class="icon f7-icons if-not-md">flag_fill</i>
        <i class="icon material-icons if-md">flag</i>
        <span class="tabbar-label">Status</span>
      </a>
      <a href="/profile/" class="tab-link" data-route-tab-id="profile">
        <i class="icon f7-icons if-not-md">person</i>
        <i class="icon material-icons if-md">person_fill</i>
        <span class="tabbar-label">Profile</span>
      </a>          
    </div>
  </div>
  <div class="tabs tabs-routable">
    <div id="main" class="page-content tab"></div>
    <div id="status" class="page-content tab"></div>
    <div id="profile" class="page-content tab"></div>  
  </div>

And my route js is like this:

var routes = [  
{
path: '/',
componentUrl: './index.html',
tabs:[
        {
            path: '/',
            id: 'main',
            component: List
        },
       {
            path: '/status/',
            id: 'status',
            component: Status
        },
        {
            path: '/profile/',
            id: 'profile',
            component: Profile
        },
    ] 
},
}

Any idea what’s wrong with my code?

2

Вам нужно создать View и установить им начальные Url

1 Like
3

can you give me example how to do that?

4

Вам нужно прочитать эту страницу: https://framework7.io/docs/view.html

5

I frustrated about this routable tabs.
already created view also doesn’t work.

6

Is it possible that there is no working example?

7

wrap your html in