Routing
The router is used to connect the component to a specific path and also to switch pages according to the path set in the URL.Polymer has some tools that help to build single page applications - app-location and app-root.
app-location:-The app-location maintains synchronization between the location bar and the state of the app. App-location is used to capture the location and send it to the app-route.
app-route:-App-route gets the URL from the app-location, then capture the path from it.
\\Syntax of app-location < app-location route="{{route}}" > app-location> ---------------------------------------------------------------- \\Syntax of app-route < app-route route="{{route}}" \\route contain URL send by app-location pattern="/:view" \\Compare URL with this pattern data="{{routeData}}" \\Object in which the received path data is stored tail="{{subroute}}"> app-route>\\Object with path data passed to the next object
< iron-page> is an element that is used to switch between pages by taking attributes and compare them with names.
\\iron-pages selects the view based on the active route < iron-pages selected="[[routeData.view]]" attr-for-selected="name"> < my-profile-view name="profile" route="{{subroute}}"> my-profile-view> < my-message-list-view name="messages" route="{{subroute}}"> my-message-list-view> < my-detail-view name="detail" route="{{subroute}}"> my-detail-view> < /iron-pages>
Route objects
Route object contain two properties:-
1. prefix:- The path matched by the previous < app-route> element.
2. path:- The path this route object is matching against.
* if the current URL is /users/lfc/messages and the top-level < app-route> has the pattern `/users/:user':* \\Syntax for prefix { prefix: '', path: '/users/lfc/messages' } ----------------------------- ----------------------------- \\Syntax for tail { prefix: '/users/lfc', path: '/messages' }
There are two ways to change the current URL when you are using < app-route>:-
1. Link:- When you click on a link, < app-location> intercepts the navigation event and updates its route property.
2. Updating the route:- We can use two-way data binding or this.set to update the route.
this.set('route.path', '/search/');
Visit :
Discussion