![](/img/trans.png)
[英]Cannot access changed array “value” in route function in PolymerJS 3.0? (Using iron-ajax and app-route elements)
[英]How to implement routing in polymer 3 using app-route
我一直坚持在聚合物3中实施路由。我遵循了app-route文档中提供的基本指南。 但是在加载网页时,我看不到任何组件被加载。 我签入了shadow DOM
,但是看不到任何DOM呈现。 不知道我在想什么。 这是代码。
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。之后,我遇到了一些适当的解决方案。 我想与社区分享给任何需要帮助的人。
你需要
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>
但是对于首次加载。,页面属性不包含任何值,并抛出undefined
。
因此,我们可以使用complex observer
来观察这种变化
static get observers(){ return ['_routerChanged(routeData.page)']; } _routerChanged(page){ console.log('CHANGED PAGE - ', page); this.page = page || 'home'; }
除非我们具有iron-pages
否则更改的路线数据不会加载组件。 它基本上是按需提供的组件切换器/加载器。 将main-app
所有组件包装在<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中进行路由实施的完整指南。 希望这可以帮助单击此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.