How to properly add routable tabs on index page


#1

Hi,

I’m trying to add some routable tabs to my index page and a white page is always shown by default. This is my HTML:

<div class="view view-main view-init ios-edges" data-url="/">
     <div class="page">
            <div class="navbar">
                <div class="navbar-inner">
                <div class="title sliding">Test</div>
                </div>
            </div>

            <div class="toolbar tabbar">
                <div class="toolbar-inner">
                    <a href="/" class="tab-link" data-route-tab-id="tab-1">1</a>
                    <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">2 </a>
                    <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">3</a>
                </div>
            </div>
            <div class="tabs tabs-routable">
                <div class="page-content tab" id="tab-1"></div>
                <div class="page-content tab" id="tab-2"></div>
                <div class="page-content tab" id="tab-3"></div>
            </div>
    </div>
</div>

And the routes:

{
            path: '/',
            url: './index.html',
            tabs: [
              {
                path: '/',
                id: 'tab-1',
                content: '1-content',
              },
              {
                path: '/tab-2/',
                id: 'tab-2',
                content: '2 content',
              },
              {
                path: '/tab-3/',
                id: 'tab-3',
                content: '3 content',
              },
            ],
},

The problem is that when I open “index.html”, the tabs are shown but without content, the content is only shown when I actually tap on one of the tabs. If I tap “Tab 1”, the route changes to “index.html#!/” and the content is shown, from there everything works perfectly.

How can I display the content of tab 1 without the need to change the route? As index.html is the default route for Cordova apps.

Thanks.


#2

First of all, you should disable pushState for cordova app