Reputation: 878
I would like to ask for your help on this: I have an application that have the following structure:
Routes:
<my-app>
- <my-application>
- <my-admin>
- <my-adminlogin>
- <my-workplace>
The problem is that I'm trying to use app-route element for the app routing:
<my-app>
element:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<my-application name="application"></my-application>
<my-admin name="admin"></my-admin>
</iron-pages>
The polymer script is:
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'application';
},
_pageChanged: function(page) {
// load page import on demand.
this.importHref(
this.resolveUrl('my-' + page + '.html'), null, null, true);
}
This work perfect when I enter to app the my-application element sows up and when I write in the url "/admin" the app automatically show up my-admin element.
I'm wonder how to keep going with the rest of the app because I need to do exactly the same in "my-admin" element to show by default "my-adminlogin" and if I write "/admin/workplace" show the my-workplace element.
I really don't know if I have to create a new <app-route>
element in the <my-admin>
element or if I have to use subroutes, but in that case I din't find a way to use the subroutes yet.
I appreciate any help on this, thanks.
Upvotes: 1
Views: 1648
Reputation: 48
You have to pass in the subroute to <my-admin>
<my-admin name="admin" route={{subroute}}></my-admin>
It then becomes the main route inside <my-admin>
Upvotes: 2