How to debug routes in Framework7?

Question

I use Framework7 with Phonegap and tried to build a simplistic app. I followed the documentation from here https://framework7.io/docs/routes.html to define a custom route, which I further streamlined to just load an about page, but cannot get it to work. In both browser and Phonegap App the link to my custom route doesn't work.

Here's what I've got:

// Init App
var myApp = new Framework7({
routes: [
  {
  name: 'foobar',
  path: '/foobar/',
  url: './about.html',
  },
],

});

And:

<div class="page-content">
    <div class="content-block">
        <p>Page content goes here</p>
        <!-- Link to another page -->
        <a href="/foobar/">Test</a>
    </div>
</div>

But whenever I run the app, my custom route is not picked up by framework and the requests get 404 error. There are no substantial error in the console which may prevent the app from executing.

Is there any way to debug the routing in Framework7 and check if routes are correctly set?

Answer 1

You can use: console.log(page.route.url); or console.log(page.route); to see where you are now.

add this code, inside page:afterin Page Event like this below:

app.on('pageAfterIn', function (page) {
    console.log("Current url: ");
    console.log(page.route.url);
    return;

});