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.
You need to have
app-route: for implementation of routing
Iron pages: Basically page switcher to load required component on demand
In app-route.,
But for first time loading., page property doe not hold any value and throws
undefined
.Hence we can use
complex observer
to observe such changesChanged route data does not load the components unless we have
iron-pages
. Its basically a component switcher/loader on demand. Wrap all component inmain-app
under<iron-pages>
Here is the complete guide for routing implementation in polymer 3 using app-route. Hope this helps click here