如何使用app-route在聚合物3中实现路由

Question

I was stuck with implementing routing in polymer 3. I followed the basic guide provided on app-route documentation. But on loading the web page., I don't see any component getting loaded. I checked in shadow DOM and don't see any DOM getting rendered. Not sure what I`m missing. Here is the code.

 static get properties() { return { page:{ type: String, reflectToAttribute: true, observer: '_pageChanged' } }; } _pageChanged(currentPage, oldPage){ console.log('CURRENT - ', currentPage); console.log('OLD - ', oldPage); switch(currentPage){ case 'home': import('./home-comp.js').then() break; case 'about': import('./about-comp.js').then() break; case 'contact': import('./contact-comp.js').then() break; default: this.page = 'home'; } } 

 <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"> </app-route> <home-comp name="home"></home-comp> <about-comp name="about"></about-comp> <contact-comp name="contact"></contact-comp> 

I don`t see lot of documentation on Polymer 3 available for checking on issues. After going through Polymer default sample web application, shop., I came across some proper solution. I would like to share it with community for any any one in need of help for same.

Answer 1

You need to have

app-route : for implementation of routing

Iron pages : Basically page switcher to load required component on demand

In app-route.,

 /* observer: Its a simple observer (basically a watch which holds current value & old value) that triggers whenever data changed in page property. We read the observer and calls a function to grab its earlier */ static get properties() { return { page:{ type: String, reflectToAttribute: true, observer: '_pageChanged' } }; } _pageChanged(currentPage, oldPage){ console.log('CURRENT - ', currentPage); console.log('OLD - ', oldPage); switch(currentPage){ case 'home': import('./home-comp.js').then() break; case 'about': import('./about-comp.js').then() break; case 'contact': import('./contact-comp.js').then() break; default: this.page = 'home'; } } 

 <!-- pattern: reads the href property., hence set the page (pattern="/:page") property in static get property to read its data --> <app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route> <ul> <li> <a href="/home">Home</a> </li> <li> <a href="/about">About</a> </li> <li> <a href="/contact">Contact</a> </li> </ul> 

But for first time loading., page property doe not hold any value and throws undefined .

Hence we can use complex observer to observe such changes

 static get observers(){ return ['_routerChanged(routeData.page)']; } _routerChanged(page){ console.log('CHANGED PAGE - ', page); this.page = page || 'home'; } 

Changed route data does not load the components unless we have iron-pages . Its basically a component switcher/loader on demand. Wrap all component in main-app under <iron-pages>

 <!-- selected: Data binding helps to get changed page value --> <!-- attr-for-selected: It reads value of name attr defined in each component & matches with selected value and triggers page switch --> <!-- fallback-selection: for 404., page/component not found handling --> <iron-pages selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404"> <home-comp name="home"></home-comp> <about-comp name="about"></about-comp> <contact-comp name="contact"></contact-comp> </iron-pages> 

Here is the complete guide for routing implementation in polymer 3 using app-route. Hope this helps click here