[英]How to link a paper-button to another Polymer page?
I created a Polymer 2.0 app from the starter kit template in order to get to know the framework a little bit. 我从入门工具包模板创建了Polymer 2.0应用程序,以便对框架有所了解。 I have a
paper-button
that should link to another page of the app. 我有一个
paper-button
,应该链接到应用程序的另一页。 However, I still haven't figured out how to do so, since Polymer is loading pages dynamically via JavaScript rather than the browser just calling another one. 但是,我仍然没有弄清楚该怎么做,因为Polymer是通过JavaScript动态加载页面的,而不是通过浏览器调用另一个页面。
I also noticed something else strange: When I click a link in my app-drawer
, the page changes automatically and the URL in my browser tab is being updated. 我还注意到了其他奇怪的事情:当我单击
app-drawer
的链接时,页面会自动更改,并且浏览器选项卡中的URL正在更新。 However, when I hit refresh with that new URL in my address bar, I get a 404 error since the URL doesn't exist. 但是,当我在地址栏中使用该新URL进行刷新时,由于该URL不存在,因此出现404错误。 So is there any way I can resolve this issue and link my button to another page?
那么,有什么办法可以解决此问题并将我的按钮链接到另一个页面?
This is my button: 这是我的按钮:
<paper-button id="buttonStartQuiz" on-click="startQuiz">
go! <iron-icon icon="chevron-right"></iron-icon>
</paper-button>
And this is the JavaScript class that corresponds to the layout: 这是与布局相对应的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);
I don't know if it's any useful, but here are my imports in case you need to know. 我不知道它是否有用,但是如果您需要知道的话,请输入以下内容。
<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">
The fact is Polymer doesn't do that, some element ( app-route
which implement with Polymer) do that. 事实是,Polymer不会这样做,某些元素(使用Polymer实现的
app-route
)会这样做。 The Polymer itself is the library that help you work with custom element easier. Polymer本身就是一个可以帮助您更轻松地使用自定义元素的库。
This behavior done by JavaScript and History API. 此行为由JavaScript和History API完成。 See how to use it on mdn .
了解如何在mdn上使用它。 An application like this, dynamically rewriting the current page rather than loading entire new pages its called a single-page application ( SPA ).
这样的应用程序会动态重写当前页面,而不是加载整个新页面,这称为单页应用程序( SPA )。
Basically application like this have only one page ( index.html
). 基本上这样的应用程序只有一页(
index.html
)。 When you try to load from another path the server will cannot find it. 当您尝试从其他路径加载时,服务器将找不到它。
You can resolve this by config the server to serve every path you used with index.html
. 您可以通过配置服务器来解决此问题,以使其与
index.html
。 For development you can easily use polymer serve
command from polymer-cli see here . 对于开发,您可以轻松地使用来自polymer-cli的
polymer serve
命令,请参见此处 。
To link to another page you can done by many ways: 要链接到另一个页面,您可以通过多种方法完成:
=> Wrap your element with <a>
: =>用
<a>
包装元素:
<a href='/another-page'>
<paper-button>...</paper-button>
</a>
=> Change route
variable from app-location
: in my-app.html =>从my-app.html中的
app-location
更改route
变量:
<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')
}
...
}
If you want to do this in your file just import and use app-location
. 如果要在文件中执行此操作,只需导入并使用
app-location
。
=> Use History API =>使用历史记录API
window.history.pushState({}, null, '/another-page');
// Notify to `app-location`
window.dispatchEvent(new CustomEvent('location-changed'))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.