Polymer - App Route

The app-route element utilizes an object, which describes a state about the current route, via the route property. It will determine the state using pattern property and determines some data related to the route, and a tail that contains the rest of the route as shown in the following code.

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

<app-route
   route = "{{subroute}}"
   pattern = "/:id"
   data = "{{subrouteData}}">
</app-route>

The explanation of the above instances is listed in the following table −

Sr.No.	Field & Description
1	app-location It is an element that provides synchronization between the browser location bar and the state of an app, and produces a route value.
2	pattern The route.path property is matched by comparing it to the pattern property.
3	app-route It sets the data property with an object, whose properties correspond to the parameters in pattern property. It is responsive to bi-directional changes to the data objects they produce.
4	tail It represents the remaining part of the route state, after the pattern has been applied to a matching route.

Hashes vs Paths

The portion of the URL pathname is used by an app-location route with the help of backend server. The app-location can be configured to use the hash part using the following attribute.

<app-location route = "{{route}}" use-hash-as-path></app-location>

polymer_elements.htm

Kickstart Your Career

Get certified by completing the course

Get Started