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>