New svelte based tabbed app - router problems

Hey,

I’m using framework7-svelte for a small home project and I’m stuck. I used the framework7 CLI to generate the code base. I used “Simple web app”, “Framework7 with Svelte” and “Tabbed Views” settings.

The generated code as a routes.js file which is imported to the app.svelte and used there as routes parameter to the f7params prop.

As far as I can see the click on a tab is not reflected in the routes.js: there is no url changing.

After playing around a bit I came to the point where I’ve read that routable tabs are not possible with views.

So my question is: why is the Framework7 boilerplate code which is generated by the Framework7 CLI doesn’t support URL changes by clicking tabs?

Because it is not supported, and in case when it is used for cordova mobile app (main Framework7 target) it is not needed to change browser URL

Is there a F7-Svelte equivalent to create-react-app that includes a working router? I love F7, the rich component library—and more so, I love Svelte—but I need a working router without boiling the oceans. Maybe an alternate question is, any good guides to installing F7 into an existing Svelte project?

https://framework7.io/cli/

Thanks for the reply, but as you wrote April 15—and which I’ve found in my own experience Framework7 CLI…

Because it is not supported, and in case when it is used for cordova mobile app (main Framework7 target) it is not needed to change browser URL

The URL does not reflect changes made when navigating—clicking on href links, etc. So, if I navigate to /projects/24/clip/7/edit… all I see in the URL field is http://localhost:8080. If F7’s router is as good as other Svelte routers like Routify, then I should be able to copy-paste http://localhost:8080/projects/24/clip/7/edit, hit Enter, and see the rendered view of Editing clip 7 of Project 24. Maybe I’m missing something, but that sounds like what you wrote in reply to Mr. Simonski.

To make it work it must be enabled on main View, e.g.:

<View main={true} pushState={true} />

Thanks man! That’s what I needed to know. All good!

1 Like