具有app-route元素的深层路径

Question

I'm using app-route component for routing.

Here is the important part of the code:

<app-location route="{{route}}"></app-location>
<app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

I would like to improve clarity of my app structure so that settings wouldn't be in a root folder but in a user folder etc. The URL copies the structure of my folders. Ideally the app-route pattern would be similar to this:

pattern="/{folderpath}/:page"

Then I would use obserever that would listen to routeData change, which would receive folderpath and page as parameters. After that I would lazy-load the page appropriately:

var resolvedPageUrl = this.resolveUrl("/views/" + folderpath + page + '-view.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);

I know that it would be easily accomplished by removing the app-route element and parsing the route myself, but I wonder if there is an "offical" way to get this behavior using app-route component.

Thanks in advance, Jan

Answer 1

The general idea is that you chain routes together. So to achieve what you want you effectively, probably would do something like this

<app-location route="{{route}}"></app-location>
<app-route 
  route="{{route}}"
  pattern="/:folderpath"
  data="{{routeData}}"
  tail="{{subRoute}}"></app-route>

--------- Another element perhaps

 <app-route
    route="{{subRoute}}"
    pattern="/:page"
    data="{{subRouteData}}"></app-route> 

Beware, there is a little gotcha with this, in that the "page" app-route will match regardless of what folder-path actually is, and if you are distributing this in other elements then you might not want it to happen.

The solution to this is to extend pattern in the subroute cases - like so

 <app-route
    route="{{subRoute}}"
    pattern="/reports/:page"
    data="{{subRouteData}}"></app-route> 

and

 <app-route
    route="{{subRoute}}"
    pattern="/appointments/:page"
    data="{{subRouteData}}"></app-route>