聚合物应用程序路由,如何路由到同一个应用程序中的新页面

时间:2017-10-03 10:10:34

标签: javascript polymer polymer-1.0 predix app-route

我正试图导航到一个新页面(即当我点击一个按钮时,它应该在应用程序中打开一个新页面)

这是第一页

<dom-module id="project-view">
<template>
            <app-location route="{{route}}" use-hash-as-path></app-location>
            <app-route 
             route="{{route}}" 
             pattern="/:name" 
             data="{{routeData}}" 
             tail="{{subroute}}">
            </app-route>

         <iron-selector selected="[[routeData.name]]" attr-for-selected="data-page">
           <a class="btn" data-page="Project" href="#/Project">Go to create project</a>
          </iron-selector>

            <iron-pages selected="[[routeData.name]]" attr-for-selected="name">
                <create-project name="Project" route="{{subroute}}"></create-project>
                </iron-pages>
        </main>
    </div>

    <div>

    </div>


</template>
<script>
    Polymer({
        is: 'project-view',
});
</script>
</dom-module>

所以现在当我点击“转到创建项目”按钮时,创建项目将在同一页面中打开,而不是转到新页面。 Url更改为/#/ Project但它会打开当前页面下方的创建项目页面

其中create-project只是一个简单的html表单页面。 我想打开创建项目,这样只有创建项目内容出现在页面上而不是先前页面内容与创建项目页面的融合

我可以导航到创建项目吗? 有什么我想念的,或者甚至是可能的

1 个答案:

答案 0 :(得分:0)

Polymer app-route就是这样设计的,可以使用单页应用程序&#34;或SPA。如果您愿意,可以创建一个链接或按钮以显示完全独立的页面,而不使用哈希。 /my-separate-page。但是,在原有的基于聚合物的应用程序中,您将失去记忆中的所有内容。