默认路由中的“可路由”选项卡导致黑屏[framework7]

Question

我正在使用Cordova中的浏览器平台。 当我在路由中添加“标签”时，会看到一个空白页。我知道此问题来自默认路由。但是更改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: '/'
});

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