Как реализовать маршрутизацию в полимере 3 с помощью app-route

Question

Я застрял с реализацией маршрутизации в полимере 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 по умолчанию, shop., Я наткнулся на какое-то правильное решение. Я хотел бы поделиться этим с сообществом для любого, кто нуждается в помощи для того же.

Answer 1

Тебе нужно иметь

app-route: для реализации маршрутизации

Железные страницы: в основном переключатель страниц для загрузки необходимого компонента по требованию

В 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>

Вот полное руководство по реализации маршрутизации в полимере 3 с использованием app-route. Надеюсь, это поможет, нажмите здесь