Routable tab in default route cause blank screen

Questions
1

im using browser platform in cordova .
when i add ‘tabs’ to routes , i see blank page. i know this problem is from default route. but change in js and html code , not change result. and I don’t receive any error in console.
my code :

var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'My App',
// App id
id: 'com.myapp.test',
// Enable swipe panel
panel: {
    swipe: 'left',
},
// Add default routes
routes: [
    {
        path: '/',
        redirect: '/home',
    },
    {
        name: 'home',
        path: '/home',
        url: './pages/home.html',
        tabs:
        [
            {
                path: '/',
                id: 'tab-1',
                url: './pages/home_content.html',
            },
            {
                path: '/nearby/',
                id: 'tab-2',
                url: './pages/friends.html',
            },
            {
                path: '/profile/',
                id: 'tab-3',
                url: './pages/profile.html',
            },
        ],
    },
],
});

var mainView = app.views.create('.view-main', {
    url: '/'
});

content of ‘./pages/home.html’ url :

 <div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="/" class="tab-link tab-link-active" data-route-tab-id="tab-1" >
            <i class="icon f7-icons ">home</i>
            <span class="tabbar-label">Posts</span>
        </a>
        <a href="nearby/" class="tab-link" data-route-tab-id="tab-2" >
            <i class="icon f7-icons ">home<span class="badge color-red">5</span></i>
            <span class="tabbar-label">friends</span>
        </a>
        <a href="profile/" class="tab-link" data-route-tab-id="tab-3">
            <i class="icon f7-icons">home</i>
            <span class="tabbar-label">Profile</span>
        </a>
    </div>
</div>
<div class="tabs tabs-routable">
    <div class="tab page-content" id="tab-1"></div>
    <div class="tab page-content" id="tab-2"></div>
    <div class="tab page-content" id="tab-3"></div>
</div>
2

There is something wrong with slashes in your routes’s paths. Try to add slashes / in the beginning and in the end of paths

1 Like
3

i do that but not working. i used a basic page in default route ( ‘/’) . then i build another page with routable tab. this is working properly. but i cant redirect to second page at all;

{
    path: '/',
    on: {
        pageBeforeIn: function (event, page) {
            console.log('no console result in this route and this function');
        }
    },
    redirect: function (route, resolve, reject) {
        console.log('no console result in this route and this function');
        if(1)
            resolve('/home/');
        }
        else
        {
            reject();
        }
    },
    url: './index.html',
},
{
    path: '/home/',
    url: './pages/home.html'
 }
4

Try not to do redirect at all, what is the point? Just place under the / what you have under /home/

5

because i couldn’t fix routing problem.
after i set :

var homeView = app.views.create('#view-main', {
  url: '/'
});

it help me to escape from blank screen but tab functionality not working on touch tab headers.
I define a login page as default page and redirect to home page after success login. this function not working in ‘redirect’ or ‘pageBeforeIn’ functions. I add this code in start of app.js after declaration app as framework7 . and work.

app.router.navigate("/");

this solve my problem. thanks for help and follow.