Question

我从入门套件模板创建了一个Polymer 2.0应用程序，以便稍微了解一下框架。我有paper-button应该链接到应用的另一个页面。但是，我仍然没有想出怎么做，因为Polymer通过JavaScript动态加载页面，而不是浏览器只是调用另一个。

我还注意到其他一些奇怪的事情：当我点击app-drawer中的链接时，页面会自动更改，并且我的浏览器标签中的URL正在更新。但是，当我在地址栏中使用新URL点击刷新时，由于URL不存在，我收到404错误。那么有什么方法可以解决这个问题并将我的按钮链接到另一个页面吗？

这是我的按钮：

<paper-button id="buttonStartQuiz" on-click="startQuiz">
    go! <iron-icon icon="chevron-right"></iron-icon>
</paper-button>

这是与布局相对应的JavaScript类：

class MyView1 extends Polymer.Element {

    static get is() { return 'my-view1'; }

    /* This method is the listener for the button click */
    startQuiz(e) {
        // Found this on a website, but doesn't work
        this.set('route.path', '/view-question');
    }

}

window.customElements.define(MyView1.is, MyView1);

我不知道它是否有用，但如果你需要知道，这里有我的进口。

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

Answer 1

事实上，Polymer不这样做，一些元素（app-route实现与Polymer）这样做。 Polymer本身就是帮助您更轻松地使用custom element的库。

此行为由JavaScript和History API完成。了解如何在mdn上使用它。像这样的应用程序，动态地重写当前页面而不是加载整个新页面，称为单页应用程序（SPA）。

基本上这样的应用程序只有一个页面（index.html）。当您尝试从另一个路径加载时，服务器将无法找到它。

您可以通过将服务器配置为为index.html使用的每个路径提供服务来解决此问题。对于开发，您可以轻松使用polymer-cli中的polymer serve命令，请参阅here。

要链接到您可以通过多种方式完成的其他页面：

=＆GT;用<a>包裹您的元素：

<a href='/another-page'>
  <paper-button>...</paper-button>
</a>

=＆GT;从route更改app-location变量：在my-app.html

中

<app-location route='{{route}}'></app-location>
...
<paper-button on-click='changeRoute'>...</paper-button>

class MyApp extends Polymer.Element {
  ...
  changeRoute () {
    this.set('route.path', '/another-page')
  }
  ...
}

如果您想在文件中执行此操作，只需导入并使用app-location。

=＆GT;使用历史记录API

window.history.pushState({}, null, '/another-page');
// Notify to `app-location`
window.dispatchEvent(new CustomEvent('location-changed'))

如何将纸质按钮链接到另一个聚合物页面？

1 个答案: