通过动态页面聚合物导航

Question

我正在开发一个带有 spring-boot 的 polymer webApp，到目前为止我喜欢两个单独的应用程序，因为我不知道如何从一个选项卡导航到另一个选项卡，我会真的很想合并这两者，我不介意有导航按钮。

正如您在第一张图片中看到的那样，我想浏览这些选项卡，例如，应用程序选项卡会将我带到另一张图片中的应用程序。我在网上搜索了很多，但我能找到的只是如何在静态内容之间导航。

这是第一个应用

及其源码

这是另一个应用程序

及其源码

Answer 1

您可以使用应用程序路由组件。 https://elements.polymer-project.org/elements/app-route

这是关于应用程序路由的多播。 https://www.youtube.com/watch?v=iAgSvlYavX0&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

基本上，您将使用路由和页面属性来设置活动路由。将使用 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>

通过动态页面聚合物导航

Navigation through dynamic pages polymer

html

web-component

polymer

polymer-designer-tool