How to set routes for dynamic urls

Questions
1

For example:

I have the following route in my back end:
/posts/slug so now when a user click <a href="/posts/blog-0"></a> or <a href="/posts/blog-1"></a> it will fetch the page from /posts/blog-1 or blog-2 depends on what the user clicked etc.

How can I achieve this? I am currently defining routes when I initialize framework7.

2

Are these dynamic pages, in the sence that ‘slub’ translate to the pos ID, so blog-1 is EQ and ID=1?

I’m assuming that is the case, otherwise you would manually be grabbing all them each time, so what you are rally looking to do is grab the dynamic portion of the route and do something.

In that case you would structure your routes as such

{
    path: '/posts/:extra/',
    url: './pages/posts.html',
    options: {
      animate: true,


    },

Notice the “:extra” at the end of the post, this would be your dynamic portion. Then oninit of the page you will look for this extra param like so

$$(document).on('page:init', '.page[data-name="posts"]', function (e) {
 var myDynamicelement = e.detail.route.params.extra;
coolfunctionthatgetsblogs(myDynamicelement);
 
});

So what is happening here is on our route we have set it up to have a dynamic element, next we have an on page init to grab this extra param, pass this to a function that will run on the init.

This would then contain the logic to inject the details of the post to the page.

This is how we do it, I’m sure there are other ways but for us, everything is pull via XHR on load so we have the data stored on device. You may want to use preprocessing before the route actually navigates to the page, in that case you may want to fire the routing after the success callback or place a loading window while the data is fetched.

3

Thanks for the reply, I thought maybe I could avoid adding event listeners somehow, I mean that it will automatically just make a get request based on the link and fetch the page (it responds with a page).

Something like this:
{ path: '/posts/:id', url: '/posts/:id', }

4

Are the pages you are trying to load in your application? What I mean by that is, are post-1, post-2 actual html pages in your app?

My assumption and maybe it was wrong is that you were grabbing the posts via an ajax call and parsing the data. With routes you can do dynamic routes with something like

{
path: ‘/users/:userId/posts/:postId’,
url: ‘http://myapp.com/posts/{{userId}}/{{postId}}’
}

The routing docs have more detail on this

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

5

Hi, I have been using Framework7 v.1 and I would to upgrade to the latest version but I can’t seem to make it to work. I need a sample code for a working custom routes and pages.
Thank you in advance!

6

Depends on your page structure from V1: When going from V1->V2, I added a catch-all only which routes to exactly to the url

A pages folder structure + catch-all might be a good place to start:

routes: [
{
  path: '/pages/:page',
  url: 'pages/{{page}}',
},
{
  path:'(.*)',
  url:'your_404_page.html',
}
],
1 Like