Routable Tabs produces blank screen

I use F7 v5 using webpack and got problem with routable tabs. I have read many times and follow the same from this page 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 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 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>
  <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>  

And my route js is like this:

var routes = [  
path: '/',
componentUrl: './index.html',
            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?

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

1 Like

can you give me example how to do that?

Вам нужно прочитать эту страницу:

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

Is it possible that there is no working example?

wrap your html in