Problems with v2 router


#1

I used framework7 v1 for another project once before, where I did something like:

myApp.onPageInit(’*’, function(page){

	var container = $(page.container);
	
	container.find('form.ajax-submit').on('submitted', function (e) {
		mainView.router.loadContent(e.detail.data);
	});


}

So all forms with class “ajax-submit” are submitted via ajax, and then the returned page is loaded with the router as page. How do I do that with framework7 v2?

This looks like a common use case for me?

Also: is it possible to do without the “routes” object like in v1? I don’t want to use v1, because the layout is better handled with v2 (simpler, and not two versions for material/ios anymore)


#2

My workaround now is

app.on('formAjaxSuccess', function (formEl, data, xhr) {
  app.router.navigate($(formEl).attr('action'), {context: xhr});
});

and add a default route like:

  {
    path: '(.*)',
    async: function(routeTo, routeFrom, resolve, reject){
        resolve({
            content: routeTo.context.response
        });
       
    }
  }, 

Is there a better way to do this?


#3

As it doesn’t supported by default, so your workaround looks ok to me :+1:


#4

I would strongly suggest “support by default”, also with some optional view-targets for forms (same as for links).

I would also suggest some possibility to completely omit the “routes” option and offer some default handling like in v1, so it would be much easier to implement an application more like a website with mobile-ui-features.

May I open a github feature request?


#5

I also have no success for a workaround in simplifying the routing mechanism to work like a conventional website. I simply like to have path=route, and pushState=true with pushSeparator=’’ but then always the new url (relative path) is appended to the current path. I currently feel with v2-router not like “keep it simple and offer powerful options”, but more like “make it complicated, and offer no way to keep it simple” :frowning:


#6

Would be good see some details


#7

Here is an example:

https://www.wordwar.org/f7bugs/index.php


#8

Did you already have a look at my example?


#9

Try to specify correct home route, at the moment you have only one * route


#10

Does that mean, I should specify routes for every of the hundrets of urls? I thought my workaround from above would be ok? Why should I have to differentiate between “paths” and “urls”? How the urls look like, should do the server (in my case), thats why I use pushState with empty pushStateSeparator.

The documentation for pushStateRoot is also confusing:
“pushStateRoot: Push state root URL separator, for example “http://my-app.com/”. It is useful only in case when you use empty (”") pushStateSeparator"
But you told me, that I should not use “http://…” but only a path like “/mypathtoapp/”.

The documentation for the initial view-url is also confusing:
“url Default (initial) View’s url. If not specified, then it is equal to document url”
I do not specify the initial url, but it seems not to be the document url (from browser address bar) always.

I am really despaired, because routing worked so good in v1 (at least compared to v2), but v2 has improved so much in many other areas.


#11

Because what you are trying to do is more like a hack and not supported.

Because it is by design, there is path and there is a url or templateUrl or component, etc. that defines how and what to load for requested path. Such logic is a standard in all modern frameworks. Vue Router uses same approach https://router.vuejs.org/guide/#javascript. And same in React Router.

There is a dynamic routes that can cover most of same-logic urls like /shop/:productId that can cover unlimited amount of such pages


#12

Paths and urls make sense for templates and components. But I don’t understand why I have to use this concept even for a simple “classic”-style web-application. Why can there not be a “default”, to be able to set implicitly the path=url, and which then simply “works”?

The urls I spoke of, are not only in the style /path/:id but many real html/php-Pages of different type, and complex parameters-combinations.