如何使用app-route在聚合物3中实现路由 [英] How to implement routing in polymer 3 using app-route
问题描述
我一直坚持在聚合物3中实现路由.我遵循了 app-route 文档中提供的基本指南.但是在加载网页时,我看不到任何组件被加载.我签入了shadow DOM
,没有看到任何DOM呈现出来.不知道我在想什么.这是代码.
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>
我看不到许多有关Polymer 3的文档可用于检查问题.在查看Polymer默认的示例Web应用程序shop.之后,我遇到了一些适当的解决方案.我想与社区分享给任何需要帮助的人.
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.
推荐答案
您需要
应用程序路由:用于实施路由
铁页面:基本上是页面切换器,可按需加载所需组件
Iron pages: Basically page switcher to load required component on demand
在应用路由中,
/* 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>
但是对于第一次加载.,页面属性不保存任何值并抛出undefined
.
But for first time loading., page property doe not hold any value and throws undefined
.
因此,我们可以使用complex observer
观察这种变化
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';
}
更改的路线数据不会加载组件,除非我们具有iron-pages
.它基本上是按需提供的组件切换器/加载器.将所有组件包装在<iron-pages>
下的main-app
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>
此处是使用app-route在聚合物3中路由实施的完整指南.希望这有助于单击此处
Here is the complete guide for routing implementation in polymer 3 using app-route. Hope this helps click here
这篇关于如何使用app-route在聚合物3中实现路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!