3

我一直坚持在聚合物 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 应用程序后，我遇到了一些合适的解决方案。我想与社区分享任何需要帮助的人。

4

1 回答 1

5

你需要有

app-route : 用于实现路由

Iron pages : 基本上是页面切换器来按需加载所需的组件

在应用程序路由中，

/* 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>

这是在聚合物 3 中使用 app-route 实现路由的完整指南。希望这有助于点击这里

于 2019-03-24T05:36:53.797 回答