[SOLVED] My Router navigate is not Solved [maybe the problem in F7 core ]

Hello . thanks for everything you do to make a development is easy .

i have a complete project (by Framework7 V4) is working fine in chrome (pc and phone )
but the problem after i build my project to android [APK]
my problem is mainView.router.navigate(’/about’); , is not working and that’s any error message
I am use a :
1- Framework v4
2- create project by Framework7 CLI Create with WebPack
3- build by use " npm run build-cordova-dev"

i am try :
1 - install cordova-plugin-whitelist
2- change my commend formart

  • mainView.router.navigate(’/about’);
    -mainView.router.navigate({name:‘about’});
    –i do everything but is not working too
    here simple of my project file :

router.js

```
import HomePage from '../pages/home.f7.html';
import upload from '../pages/upload.f7.html';
import imgprocess from '../pages/imgprocess.f7.html';
import about from '../pages/about.f7.html';

import NotFoundPage from '../pages/404.f7.html';

var routes = [
  {
    path: '/',
    component: HomePage,
	
  },
  { name:'upload',
    path: '/upload/',
    component: upload,
  },
   { name:'imgprocess',
    path: '/imgprocess/',
    component: imgprocess,
  },
    { name:'about',
    path: '/about/',
    component: about,

  }, 
 ,
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];
export default routes;

```

index.js

  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">

  <meta name="theme-color" content="#007aff">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <title>Colourise</title>
  
  
 

my code in app.js

  $("#upload3").on('click',function(){

 var mainView = app.view.main;
   mainView.router.navigate({ name: 'about' });
    });

<p><a href="#" id="upload3" name="upload3" class="button button-raised button-fill">go</a></p>

i try and try everything . i think the problem with Framework7 Core

Any reason why do you create same topic again?

If router works in Chrome then it works, no issues in core. You need to provide more details. What is #upload3 and where is it? What is your app config? What is your Views config? Etc.

1 Like

thanks for replay, sorry i am Repeat the topic ,
ok i will show your my app config

app.js

import $$ from 'dom7';
import $ from '../lib/jquery-3.4.0.min.js';
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import Cordova APIs
import cordovaApp from './cordova-app.js';
// Import Routes
import routes from './routes.js';

import imghome from '../static/home.png';
 document.addEventListener("deviceready", onDeviceReady, false);
//var algorithmia = require("algorithmia");
var app = new Framework7({
  root: '#app', // App root element
  id: 'com.colourise7.anaspro', // App bundle ID
  name: 'Colourise', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },

    };
  },
  // App root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: routes,



  // Input settings
  input: {
    scrollIntoViewOnFocus: !!Framework7.device.cordova,
    scrollIntoViewCentered: !!Framework7.device.cordova,
  },
  // Cordova Statusbar settings
  statusbar: {
    overlay: Framework7.device.cordova && Framework7.device.ios || 'auto',
    iosOverlaysWebView: true,
    androidOverlaysWebView: false,
  },
  on: {
    init: function () {
      var f7 = this;
      if (f7.device.cordova) {
        // Init cordova APIs (see cordova-app.js)
        cordovaApp.init(f7);

      }
    },
  },
});
 
/////////////////////////

 var mainView = app.view.main;
$$("#upload3").on('click',function(){
 var mainView = app.view.main;
   mainView.router.navigate({ name: 'about' });
    });

home.f7.html

 <div class="page" data-name="home">
        <!-- Top Navbar -->
        <div class="navbar ">
          <div class="navbar-inner">
            <div class="left">
              <a href="#" class="link icon-only panel-open" data-panel="left">
                <i class="icon f7-icons if-not-md">menu</i>
                <i class="icon material-icons if-md">menu</i>
              </a>
            </div>
            <div class="title sliding">ColorRise</div>
            <div class="right">
              <a href="#" class="link icon-only panel-open" data-panel="right">
                <i class="icon f7-icons if-not-md">menu</i>
                <i class="icon material-icons if-md">menu</i>
              </a>
            </div>
            <div class="title-large">
              <div class="title-large-text">ColorRise</div>
            </div>
          </div>
        </div>
        <!-- Toolbar-->
     
        <!-- Scrollable page content-->
        <div class="page-content">
          <div class="block block-strong">
		  <p>
    <span class="progressbar-infinite"></span>
  </p>
            <p>ColorRise your black & White Photo</p>
			<p> <img id="imghome" name="imghome" src="static/home.png" width="100%" height="100%" class="lazy lazy-fade-in demo-lazy"/> </p>
          
            <div class="row">
              <div class="col-100">
                <a href="/upload/" id="upload" class="button  button-large button-fill"> 
				
				Get Start <i class="icon f7-icons   color-white">arrow_right_round_fill</i>
				</a>
				  <p><a  href="#" id="upload3" name="upload3" class="button button-raised button-fill">go</a></p>
              </div>
             
            </div>
          </div>

    
          </div>
        </div>
 
</template>
<script>
export default {}
</script>

i give you simple example to my prject , it’s only button when click is must go to about page

maybe

*note if i use a F7 without Webpack ( with my route { name :about , url :’…/page/about.html’ ) is working in phone , but with Webpack not workink because try to load page from ‘…/page/about.htm’ and webpack search at Static Folder only

index.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--
  Customize this policy to fit your own app's needs. For more guidance, see:
      https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
  Some notes:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
      * Enable inline JS: add 'unsafe-inline' to default-src
  -->
  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">

  <meta name="theme-color" content="#007aff">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <title>Colourise</title>
  
  
  
  
  <!-- built styles file will be auto injected -->
</head>
<body class="color-theme-orange theme-dark">
  <div id="app">
    <!-- Status bar overlay for fullscreen mode-->
    <div class="statusbar"></div>
    <!-- Left panel with cover effect-->
    <div class="panel panel-left panel-cover theme-dark">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Left Panel</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">Left panel content goes here</div>
          </div>
        </div>
      </div>
    </div>
    <!-- Right panel with reveal effect-->
    <div class="panel panel-right panel-reveal theme-dark">
      <div class="view">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Right Panel</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">Right panel content goes here</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main view-init safe-areas" data-url="/"></div>





  </div>
  
  <script src="cordova.js"></script>

 

  <!-- built script files will be auto injected -->
</body>
</html>

You should put this code:

$$("#upload3").on('click',function(){
 var mainView = app.view.main;
   mainView.router.navigate({ name: 'about' });
    });

In your home.f7.html into the pageInit event handler

i was try too

$$(document).on(‘page:init’, ‘.page[data-name=“home”]’, function (e,page) {
var pageContainer=page.$el;

$$("#upload3").on(‘click’,function(){
var mainView = app.view.main;
mainView.router.navigate({ name: ‘about’ });
});
}

not workink too

No, you should put it into pageInit event handler in home.f7.html file http://framework7.io/docs/router-component.html#component-page-events

1 Like

ok i will try change my code then inform you , thank for your efforts

but all my code in file app.js
you mean all code relate home.f7.html page must be inside home.f7.htm !!?

<template>
 
 <div class="page" data-name="home">
        <!-- Top Navbar -->
        <div class="navbar ">
          <div class="navbar-inner">
            <div class="left">
              <a href="#" class="link icon-only panel-open" data-panel="left">
                <i class="icon f7-icons if-not-md">menu</i>
                <i class="icon material-icons if-md">menu</i>
              </a>
            </div>
            <div class="title sliding">ColorRise</div>
            <div class="right">
              <a href="#" class="link icon-only panel-open" data-panel="right">
                <i class="icon f7-icons if-not-md">menu</i>
                <i class="icon material-icons if-md">menu</i>
              </a>
            </div>
            <div class="title-large">
              <div class="title-large-text">ColorRise</div>
            </div>
          </div>
        </div>
        <!-- Toolbar-->
     
        <!-- Scrollable page content-->
        <div class="page-content">
          <div class="block block-strong">
		  <p>
    <span class="progressbar-infinite"></span>
  </p>
            <p>ColorRise your black & White Photo</p>
			<p> <img id="imghome" name="imghome" src="static/home.png" width="100%" height="100%" class="lazy lazy-fade-in demo-lazy"/> </p>
          
            <div class="row">
              <div class="col-100">
                <a href="/upload/" id="upload" class="button  button-large button-fill"> 
				
				Get Start <i class="icon f7-icons   color-white">arrow_right_round_fill</i>
				</a>
				  <p><a  href="#" id="upload3" name="upload3" class="button button-raised button-fill">go</a></p>
              </div>
             
            </div>
          </div>

    
          </div>
        </div>
 
</template>
<script>
  export default {
  
    // Page Events
    on: {
      pageMounted: function(e, page) {
        console.log('pageMounted', page);
      },
      pageInit: function(e, page) {
        console.log('pageInit', page);

     $$("#upload3").on('click',function(){
      var mainView = app.view.main;
  mainView.router.navigate({ name: 'about' });
   });
      },
   
    }
  }
</script>

message error is ::
ncaught ReferenceError: $$ is not defined
at Framework7Component.pageInit (home.f7.html:9)
at HTMLDivElement.handleEvent (dom7.module.js:407)
at Dom7.trigger (dom7.module.js:569)
at Router.pageCallback (router-class.js:954)
at Router.forward (navigate.js:465)
at resolve (navigate.js:671)
at eval (component-loader.js:89)
at compile (component-loader.js:38)
at Router.componentLoader (component-loader.js:70)
at Router.pageComponentLoader (component-loader.js:87)

thanks bro , my problem is solved :slight_smile:

hello how did you solve the problem?