Навигация по динамическим страницам полимера

Question

Я работаю над полимерным webApp с пружинной загрузкой, до сих пор мне нравились два отдельных приложения, потому что я не могу понять, как перемещаться с вкладки на вкладку, я бы действительно как объединить эти два, я не против иметь кнопки для навигации, пожалуйста.

Как вы можете видеть на первом снимке есть вкладки, которые я хотел бы перемещать по ним, вкладка приложений, например, приведет меня к приложению на другом изображении. Я много искал в Интернете, но все, что я мог найти, - это перемещение между статическим контентом.

Это первое приложение

и его ЦСИ

и это другое приложение

и его ЦСИ

Answer 1

Вы можете использовать компонент маршрута приложения. https://elements.polymer-project.org/elements/app-route

Вот поликаст о маршруте приложения. https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

В основном вы используете атрибут route и page для установки активного маршрута. Переключатель между активным элементом кода будет выполнен с использованием компонента селектора железа.

Что-то вроде этого:

<app-location route="{{ route }}"></app-location> 
<app-route route="{{ route }}" 
      pattern="/:page" 
      data="{{ routeData }}" 
      tail="{{ subroute }}"></app-route> 

<iron-selector attr-for-selected="route" 
       selected="[[ page ]]" 
       role="navigation"> 
    <a route="editor" href="/editor">Editor</a> 
    <a route="analyze" href="/analyze">Analyze</a> 
    <a route="community" href="/community">Community</a> 
</iron-selector> 

<iron-pages role="main" 
      attr-for-selected="route" 
      selected="[[ page ]]"> 
    <my-editor route="editor"></my-editor> 
    <my-analyze route="analyze"></my-analyze> 
    <my-community route="community"></my-community> 
</iron-pages> 

<script> 
    Polymer({ 
     is:'my-element', 
     properties: { 
      page: { 
       type: String, 
       notify: true, 
       reflectToAttribute: true, 
       observer: "_pageChanged" 
      } 
     }, 

     observers: [ 
      "_routePageChanged(routeData.page)" 
     ], 

     attached: function(e) { 
      // Lazyload the views as soon as the AppShell has been Painted 
      this.importHref(
       this.resolveUrl("my-editor.html"), null, null, true); 
      this.importHref(
       this.resolveUrl("my-analyze"), null, null, true); 
      this.importHref(
       this.resolveUrl("my-community"), null, null, true); 

      // If the application is reloaded, redirect to /analyze 
      if(this.page != "analyze"){ 
       this.set("route.path", "/analyze"); 
      } 
     }, 

     _changeRoute: function(e) { 
      this.set("route.path", e.detail.requestRoute); 
     }, 

     _routePageChanged: function(page) { 
      this.page = page || "analyze"; 
     }, 
    }) 
</script>