Вкладка «Маршрутизатор» в маршруте по умолчанию вызывает пустой экран [framework7] - PullRequest
0 голосов
/ 21 октября 2018

Я использую платформу браузера в Кордове.Когда я добавляю «вкладки» к маршрутам, я вижу пустую страницу.Я знаю, что эта проблема из маршрута по умолчанию.Но изменение в JS и HTML-код, а не изменение результата.и я не получаю никакой ошибки в консоли.

Мой код:

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: '/'
});

Содержимое URL-адреса ./pages/home.html.Это загрузит индексную страницу как представление по умолчанию.

 <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>
...