如何 link 一个 paper-button 到另一个 Polymer 页面？

Question

我从初学者工具包模板创建了一个 Polymer 2.0 应用程序，以便稍微了解该框架。我有一个 paper-button 应该 link 到应用程序的另一个页面。但是，我仍然不知道该怎么做，因为 Polymer 是通过 JavaScript 动态加载页面，而不是浏览器只是调用另一个页面。

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

这是我的按钮：

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

这是对应布局的JavaScriptclass：

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 和历史记录 API 完成。在 mdn. An application like this, dynamically rewriting the current page rather than loading entire new pages its called a single-page application (SPA).

上查看如何使用它

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

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

要link转到另一个页面，您可以通过多种方式完成：

=> 用 <a>:

包裹你的元素

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

=> 从 app-location 更改 route 变量：在 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。

=> 使用历史记录 API

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

如何 link 一个 paper-button 到另一个 Polymer 页面？

How to link a paper-button to another Polymer page?

html

javascript

polymer

polymer-2.x