Here’s how I made it work:
index.js, routes.js and app.js needs to be loaded in index.html
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
routes.js has all your routes…mine are made automatically by wappler
{
"path": "/settings/",
"url": "settings.html"
}
the routes are loaded in fw7 in app.js (I've trimmed out all the rest of mine):
var app = new Framework7({
routes: window.routes ? window.routes : [],
});
Each content page looks like this.
Notice the head page property which points to your parent file.
The page settings. The navbar can also go within the page content and will behave differently.
On your parent page (eg. index.html) you need a view that will hold the pages. If just starting out, you just need one view and it will be the “main” view.
Using my example, an onclick event could trigger a page change. Notice I am using the path from the route.
onclick="mainView.router.navigate('/settings/');"
or via a link:
<a class="link" href="/settings/">Settings</a>
These are just the basics, there is a ton that can be done with fw7 views/routing/pages.
–Ken