プロジェクトをapkに変換した後にFramework7ルータが動作しない

Question

私はこのtutorialを試用して、CordovaとFramework7を介してAndroidアプリケーションを開発しました。これはブラウザとAndroid Emulator（ADK）でも動作します。プロジェクトをCordova build commandでapkに変換し、apkファイルを自分のデバイスに転送しました。

しかし、アプリケーションは動作しますが、Framework7（実際にはVue）のアプリケーションであるリストには何も表示されません。 Vueは初期化されていないようです。ここで

は、HTMLコードである：ここで

<template id="page-alt-sayfa"> 
<f7-page> 
    <f7-navbar title="Alt Sayfa" back-link="Geri" sliding></f7-navbar> 
    <f7-block-title> 
    <!-- sayfa id'sini data obj içinde ara--> 
    {{this.$root.$data['icerik'][$route.params['sayfaId']].baslik}}</p> 
    </f7-block-title> 
    <f7-block-title>Dondurucuya Konur mu?</f7-block-title> 
    <f7-block inner> 
    <img style="width:95%;overflow:hidden" :src="'./img/sembolik/'+$route.params['sayfaId']+'.png'"/> 
    <br> 
    <div v-if="this.$root.$data['icerik'][$route.params['sayfaId']].dondurucu"> 
     <div class="chip"> 
      <div class="chip-media bg-green"><i class="material-icons">dns</i></div> 
      <div class="chip-label">Dondurucuya Konulur</div> 
     </div> 
    </div> 

はFramework7とVueのを初期化している：

...   
<script src="cordova.js"></script> 
      <script src="js/framework7.min.js"></script> 
      <script src="js/vue.min.js"></script> 
      <script src="js/framework7-vue.min.js"></script> 
      <script type="text/javascript" src="js/data.json"></script> 
      <script src="js/app.js"></script> 
     </body> 

    </html> 

ここに私の携帯電話からscreenshootを。

どのように問題を解決することができますか？

編集：ここに は私のルータのコードです：

// Init F7 Vue Plugin 
Vue.use(Framework7Vue) 
// Init Page Components 
Vue.component('page-about', { 
    template: '#page-about' 
}) 
Vue.component('page-form', { 
    template: '#page-form' 
}) 
Vue.component('page-dynamic-routing', { 
    template: '#page-dynamic-routing' 
}) 
Vue.component('page-alt-sayfa', { 
    template: '#page-alt-sayfa' 
}) 
// Handle device ready event 
// Note: You may want to check out the vue-cordova package on npm for cordova specific handling with vue - https://www.npmjs.com/package/vue-cordova 
document.addEventListener('deviceready',() => { 
    console.log("DEVICE IS READY!"); 
}, false) 


// Init App 
new Vue({ 
    el: '#app', 
    // Init Framework7 by passing parameters here 
    framework7: { 
    root: '#app', 
    /* Uncomment to enable Material theme: */ 
    // material: true, 
    routes: [ 
     { 
     path: '/about/', 
     component: 'page-about' 
     }, 
     { 
     path: '/alt-sayfa/:sayfaId/', 
     component: 'page-alt-sayfa' 
     } 
    ] 
    }, 
    data: { 
    mesaj: 'Merhaba', 
    icerik: icerik 
    } 
}); 

Answer 1

私は最近、同様の問題に直面しました。コンピュータのブラウザとエミュレータでテストしたところ、ルーティングはうまくいっていました。しかし、私がapkを作ったとき、それはうまく動作しませんでした。それは私のコードのビューの名前で大文字と小文字の区別の問題があることがわかった。私のコンピュータとエミュレータはそれを無視してルーティングを行ったが、私の電話はそうしなかった。

大文字と小文字を区別しないように、ビューの名前のスペルを確認しましたか？

Answer 2

どこから問題があるのか​​わかりません。しかし、私はNPMテンプレートを見つけて、このテンプレートに基づいて自分のコードを再編成し、それが

テンプレートを働いている：

https://framework7.io/vue/templates.html

私は、このコマンドでそれをインストール：

cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack