Router problem, content not being rendered, what am I missing?

I am testing framework7, no React or Vue involved, just framework7. I followed the intro but I am missing something because even though the click even is triggered, I am not seeing the change in views.

<!DOCTYPE html>
    <meta charset="utf-8">
    <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="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar (Android only) -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>Grocery Monkey App</title>
  <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" type="text/css" href="/css/app.css">
        <!-- App root element -->
            <div id="app">

              <!-- Your main view, should have "view-main" class -->
              <div class="view view-main">
                <!-- Initial Page, "data-name" contains page name -->
                <div data-name="home" class="page">

                  <!-- Top Navbar -->
                  <div class="navbar">
                    <div class="navbar-bg"></div>
                    <div class="navbar-inner">
                      <div class="title">Grocery List</div>

                  <!-- Bottom Toolbar -->
                  <div class="toolbar toolbar-bottom">
                    <div class="toolbar-inner">
                      <!-- Toolbar links -->
                      <a href="#" class="link">Link 1</a>
                      <a href="#" class="link">Link 2</a>

                  <!-- Scrollable page content -->
                  <div class="page-content">
                    <p>Page content goes here</p>
                    <!-- Link to another page -->
                    <a href="./about/">About app</a>
        <script src=""></script>
        <script async src="/js/main.js"></script>
/* Main JS Main JS */
var app = new Framework7({
  root: '#app',
  name: 'Grocery Monkey',
  id: 'mobi.grocerymonkey',
  serviceWorker: {
    path: './../sw.js',
    scope: '/'
  routes: [
      name: 'about',
      path: '/about/',
      templateUrl: './pages/about.html',
      on: {
        pageInit: (e, page) => console.log(page),
        pageAfterIn: (e, page) => console.log(page)
      name: '404',
      path: '(.*)',
      url: './pages/404.html'

var mainView = app.views.create('.view-main');

I also tried changing the router url to content, but I still don’t see the content


<a href="/about/">About app</a>

@shastox you can’t tell, but I am doing a facepalm right now… thanks. I read an article on some blog that did it like that, but had forgotten all about it.

It works with the content, but changing it back to url: ‘/pages/about.html’ still gives me the same result, content of about.html isn’t loaded?

When I inspect the DOM, I can see that the markup from the first page is injected twice. But the content from about.html is not used

Check your browser console, maybe there are some errors?

No, I don’t see any errors, everything is loading fine, I can even see the these

on: {
pageInit: (e, page) => console.log(page),
pageAfterIn: (e, page) => console.log(page)

being triggered when I click the link, the about.html file is being loaded but not shown anywhere

Check Nerwork tab in dev tools and see what actually loaded form requested path

It does, I see pages/about.html being requested

And what is in about.html actual response ?

This is the content

<div class="page">
        <div class="page-content">
          <div class="block">
            <p>This page created dynamically</p>

And from the console

Then all should work. I guess something simple is missing. Do you have live example with the issue?

All files are here

I change from ParcelJS to Webpack and somehow that did the trick

You should mention that you were using ParcelJS