Framework7：別のビューに移動するときにNavbarが非表示になる

今はFramework7を学習していますが、この問題が残っています。私はインデックスで 'ホーム2を行く' をクリックしていたとき、私は、これはファイルであるFramework7：別のビューに移動するときにNavbarが非表示になる

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="theme-color" content="#673ab7"> 

    <title>Ciptaloka Editor</title> 

    <link rel="icon" href="assets/img/favicon.png"> 
    <link rel="stylesheet" href="assets/css/framework7.material.min.css"> 
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css"> 
    <link rel="stylesheet" href="assets/css/style.css"> 
</head> 

<body class="theme-teal"> 

<div class="views"> 
    <div class="view view-main"> 
     <div class="pages navbar-fixed"> 
      <div data-page="index" class="page"> 
       <!-- off canvas --> 
       <div class="panel-overlay"></div> 
       <div class="panel panel-left panel-cover"> 
       a 
       </div> 

       <!-- Navbar --> 
       <div class="navbar"> 
        <div class="navbar-inner"> 
         <div class="left"> 
          <a class="link open-panel" data-panel-left> 
           <i class="icon material-icons">menu</i> 
          </a> 
         </div> 
         <div class="center"> 
          Custom T-Shirt 
         </div> 
         <div class="right"> 
          <a class="link"> 
           Done 
          </a> 
         </div> 
        </div> 
       </div> 

       <!-- Toolbar --> 
       <div class="toolbar toolbar-bottom tabbar tabbar-labels"> 
        <div class="toolbar-inner"> 
         <a href="#produk" class="link tab-link active"> 
          <i class="icon material-icons">dashboard</i> 
          <span class="tabbar-label">Produk</span> 
         </a> 
         <a href="#image" class="link tab-link"> 
          <i class="icon material-icons">add_a_photo</i> 
          <span class="tabbar-label">Image</span> 
         </a> 
         <a href="#text" class="link tab-link"> 
          <i class="icon material-icons">text_fields</i> 
          <span class="tabbar-label">Text</span> 
         </a> 
         <a href="#clipart" class="link tab-link"> 
          <i class="icon material-icons">photo_filter</i> 
          <span class="tabbar-label">Clipart</span> 
         </a> 
        </div> 
       </div> 

       <!-- Content --> 
       <div class="page-content"> 
        <div class="content-block"> 
         <div class="tabs"> 
          <div class="tab active" id="produk"> 
           <a href="index2.html">Go home 2</a> 
          </div> 
          <div class="tab" id="image"> 
           Image 
          </div> 
          <div class="tab" id="text"> 
           Text 
          </div> 
          <div class="tab" id="clipart"> 
           Clipart 
          </div> 
         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript" src="assets/js/framework7.min.js"></script> 
<script type="text/javascript" src="assets/js/my-app.js"></script> 
</body> 
</html>

index2.html

<div data-page="index2" class="page"> 
    <!-- Navbar --> 
    <div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="left"> 
      <a class="link open-panel"> 
       <a href="index.html"> 
        <i class="icon material-icons">back</i> 
       </a> 
      </a> 
     </div> 
     <div class="center"> 
      Custom Case 
     </div> 
    </div> 
    </div> 

    <!-- Content --> 
    <div class="page-content"> 
     <div class="content-block"> 
      Success direct page 
     </div> 
    </div> 
</div>

2つのページを作成しました.htmlは、index2.htmlに直接向いていますが、コンテンツは表示されますが、navbarでは表示されません。その背景は表示されていますが、テキストは表示されません。この私のscreenshoot：これが起こるのはなぜ