Framework7 router does not work after converting project to apk

Question

I have tried out this tutorial to develop an android application via Cordova and Framework7. It works in the browser and also Android Emulator (ADK). I converted the project to the apk with Cordova build command and transferred the apk file to my device.

The application works, however, the list which is the application based Framework7 (indeed on Vue) does not show anything. It looks like Vue not initialized.

Here is the HTML code:

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

Here is initializing Framework7 and 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>

Here a screenshoot from my phone.

_{(source: ultraimg.com)}

How can the problem be solved?

Edit: Here is my router code:

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

I recently faced a similar problem. The routing was working well when tested my computer browser and emulator. But when I built the apk, it just did not work. It turned out I had a case sensitivity issue with the names of the views in my code. My computer and emulator ignored it and did the routing, but my phone didn't.

Have you crossed-checked the spelling of the names of your views to make sure it is not a case-sensitivity issue?

Answer 2

I do not find the where is the problem stems from. However, I find a npm template and reorganized my code according to this template and it worked

Template is:

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

I installed it with this command:

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