Linking between pages of a F7 Single Page App

[garyf]

Hi. I’ve started my first F7 SPA for Android/iOS using Wappler. Each “page” is in the index.html file and within their own div using this syntax:
<div class="page" data-name="page1"> <!-- content --> </div>

To link between pages I’ve tried this…
<a href="page2" class="link">Page 2</a>

I set up a route where Type is “Page” and the Page Name is “page2”.
I noticed the following is written to routes.js
var routes = [ { "path": "page1", "name": "page1" }, { "path": "page2", "name": "page2" } ]
But nothing happens when I tap the link. I’ve spent hours trying different things, including reading F7 docs and Wappler docs. A Wappler tutorial on this is quite old as the options in the GUI have changed so I couldn’t follow it.
I can’t find an example to achieve this using v3.5.x, assuming it can be done within Wappler’s GUI and without requiring F7 API calls by typing JavaScript (as the F7 docs suggest).

I’d be grateful if someone can push me over this hurdle please?

Thank you.
Gary.

[mebeingken]

Hey Gary,

I think you’ll want to have your pages as Content Pages, rather than as Pages within the main view – as your app grows, it makes things easier to manage.

My quick little test works like this:

Index:

Create a new Content Page:

Set the Head page to index:

Then you can use the links on index:

Looks like this:

Screen Recording 2020-12-01 at 10.03.01 AM

[garyf]

Ken, thank you so much for taking the time to explain with screenshots. I didn’t mean that I wanted to link to other files of pages, but rather link to pages within the structure of the same file. That said, you taught me how easy it is to use additional files and how Wappler cleverly treats them like an old school include. Presumably some javascript is doing the include because it’s not the local web server doing it.

I was amazed to see, using Chrome’s elements inspector, the other files were injected into the index.html file when I clicked on them. This must be so obvious to seasoned Wappler users, but I was completely oblivious to the existence of that feature and how it works. Thank you Ken! It was a little moment for me.

Now to deliberate the pros and cons of multiple pages embedded within the same file versus using multiple files of pages.