동적 페이지를 통한 탐색 폴리머

Question

저는 spring-boot로 폴리머 webApp에서 작업하고 있습니다. 지금까지 탭에서 탭으로 이동하는 방법을 알 수 없기 때문에 두 가지 별도의 앱을 사용했습니다. 두 가지를 병합하고 싶습니다. 버튼을 눌러도 괜찮습니다.

첫 번째 그림에서 볼 수있는 것처럼 탭을 통해 응용 프로그램 탭을 탐색하면 다른 그림의 응용 프로그램으로 이동합니다. 웹을 통해 많은 검색을하지만 정적 콘텐츠를 탐색하는 방법 만 찾을 수 있습니다.

이 첫 번째 응용 프로그램에게 있습니다

와 SRC

이 다른 응용 프로그램

와 SRC

Answer 1

app-route 구성 요소를 사용할 수 있습니다. https://elements.polymer-project.org/elements/app-route

다음은 app-route에 대한 polycast입니다. https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

기본적으로 route 및 page 속성을 사용하여 활성 경로를 설정합니다. 어떤 코드가 활성화되어 있는지의 전환은 iron-selector 구성 요소를 사용하여 수행됩니다. 이 같은

뭔가 :

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