Route in V5. How-to?

Hi. I’m still struggling with the logic of routes.
Would be possible to post the most simple example showing 3 pages where user move through buttons positioned on the bottom of the window?

You should be looking at this, otherwise point out which part in the routes documentation that is not clear to you

Well. Generally speaking i can’t understand the philosophy. In F7 v1 and V2 and in Jquery i just have links to pages.
I don’t understand the whole rooting concept.
Why it’s needed?
Why I cannot use simple links?
What advantages it takes compared to straight links?
It might be obvious but I’m missing the paradigm of rooting concept

Hi Luigi37,

I totally understand where you are at because I was there too a while back, I think the hardest part is really wrapping your head around the concepts and then piping it all together.

I think it’s important to understand that with FW7 you don’t ‘have’ to use routing. In general you can use the basic page structure and hrefs to navigate however this is only good if you site is a bit static. Most modern PWAPS are dynamic in nature so routing becomes necessary.

With that said, really the ‘Why’ of using routing, well there are a number of upsides from it being better structured but generally it follows the MVC pattern.

So to your question as to some basic example

Depending on how you application is structured but lets just assume for simplicity you have everything in one JS file ( usually this would be broken up for easy debug / file management etc )

Inside you app.js you will have your ‘routes’, and routes are triggered by the url structure with “/” being your root, so the main route would be something like this

{
path: ‘/’,
url: ‘index.html’,
},

What is this doing? Well its saying hey, look for the ‘path’ and if it matches load up the ‘url’ in this case the root is index.html.

Great, so now when our app loads up it will load up the index.html file for the home page.

But how do we actually do something on those pages or navigate to another? Well FW7 ( using DOM7, should just use that vs jQuery or vue, react etc)

I’m a bit old school I guess and still like using mainly vanilla JS, but I digress.

Back to the question how would you navigate between routes? Well, they way I do is is by using

app.views.main.router.navigate(‘route’, {options});

So lets say you have a button on the home screen and want it to go to coolpage you might do something like

$$(document).on(“click”,"#mybutton",function(){
app.views.main.router.navigate(’/myCoolPage/’, {reloadCurrent: false,animate:true});
})

What this is doing is saying, hey when you click on the myButton navigate to the myCoolPage route (the options there like reloadCurrent and animate are route options you can pass so you may want to look them up)

Ok, so we told the app to load up the myCoolPage route, and our route definition would be

{
path: ‘/myCoolPage/’,
url: ‘myCoolPage.html’,
},

So now it would go to this route and load up the myCoolPage html page

Now doing stuff on load can be done by using the pageinit command like

$$(document).on(‘page:init’, ‘.page[data-name=“myCoolPage”]’, function (e) {
mycoolPage()
});

Thanks Michl,
so in principle, I can consider the routing as a level of abstraction that allows more freedom.
In the most basic implementation I can just use it to couple path and url, right?

Now… is there the chance to have a multipage doc in a single html file or do I need to create a page for every view?

Thanks

So… no “multipage” html files in F7 v5? Shall I use one html for each page?

That is really up to you, you can have a single page and then route to the section of the single html file, however its much easier to maintain if you break it up.

You would want to look at this page for the single page structure

https://framework7.io/docs/view.html