[英]Change Polymer 3 route to a different html page
I am creating a sample Polymer 3 app with a login and dashboard page. 我正在创建一个带有登录和仪表板页面的示例Polymer 3应用程序。 My backend is a simple JX-RS REST API.
我的后端是一个简单的JX-RS REST API。 Once I get a response from the web service, I want to go to a new HTML file (lets says
dashboard.html
) rather than route to a different element within the same page. 从Web服务获得响应后,我想转到一个新的HTML文件(让我们说
dashboard.html
),而不是路由到同一页面中的另一个元素。 When I go through the official website , I could not really understand how to proceed as I am a beginner in JS itself. 当我浏览官方网站时 ,因为我是JS本身的初学者,所以我无法真正理解该如何进行。
In my index.html
, I have <my-login>
, after the response, handlePositiveResponse
is called. 在我的
index.html
,我有<my-login>
,在响应之后,将调用handlePositiveResponse
。 This is the place where I am changing the route. 这是我更改路线的地方。 Please find the method below.
请在下面找到方法。
Following is my code: login.js 以下是我的代码: login.js
class MyLogin extends PolymerElement {
static get template() {
return html`
<h1>Hello World..!!</h1>
<iron-form id="loginUserForm" on-iron-form-response="handlePositiveResponse" on-iron-form-error="handleNegativeResponse">
<form id="innerLoginUserForm" content-type="application/json" method="post">
<paper-input id="email" name="email" label="E-Mail Address"></paper-input>
<paper-input id="password" name="password" label="Password" type="password"></paper-input>
<paper-button disabled="{{activeRequest}}" raised id="loginButton" on-tap="submitLogin">Sign In</paper-button>
</form>
</iron-form>
`;
}
static get properties() {
return {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
routeData: Object,
subroute: Object
};
}
static get observers() {
return [
'_routePageChanged(routeData.page)'
];
}
_routePageChanged(page) {
// Show the corresponding page according to the route.
//
// If no page was found in the route data, page will be an empty string.
// Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
if (!page) {
this.page = 'login';
} else if (['view1', 'view2', 'view3', 'my-dashboard'].indexOf(page) !== -1) {
this.page = page;
} else {
this.page = 'view404';
}
// Close a non-persistent drawer when the page & route are changed.
// if (!this.$.drawer.persistent) {
// this.$.drawer.close();
// }
}
_pageChanged(page) {
// Import the page component on demand.
//
// Note: `polymer build` doesn't like string concatenation in the import
// statement, so break it up.
switch (page) {
case 'view1':
import('./my-view1.js');
break;
case 'view2':
import('./my-view2.js');
break;
case 'view3':
import('./my-view3.js');
break;
case 'my-dashboard':
import('./my-dashboard.js');
break;
case 'view404':
import('./my-view404.js');
break;
}
}
submitLogin(e) {
var form = this.shadowRoot.querySelector('#loginUserForm');
this.shadowRoot.querySelector('#innerLoginUserForm').action = 'http://localhost:8080/PolymerJavaBackend/rest/login'
form.submit();
}
handlePositiveResponse(response) {
this._routePageChanged(null);
this._routePageChanged('my-dashboard');
console.log(response);
}
handleNegativeResponse(error) {
console.log(error);
}
Would appreciate, if you could advise, how to route to a new html page. 如果您可以提出建议,将不胜感激如何路由到新的html页面。
Is that your top-level element? 那是您的顶级元素吗? Is in your top-level element, where you should have the iron-pages element with all the pages you have in your app, and where you must add the new page.
在顶层元素中,应该在其中具有Iron-pages元素,其中包含应用程序中的所有页面,还必须在其中添加新页面。
There you should have the _routePageChanged to check the route data changes. 在那里,您应该具有_routePageChanged来检查路线数据更改。 And _pageChanged to import the page.
和_pageChanged导入页面。
If you want to navigate to your new page, not from menu, but when you'd get response from the server, in handlePositiveResponse(response) , you can use the two-way databinding or this.set to update the route value: this.set('route.path', '/my-dashboard');
如果要导航到新页面(而不是从菜单中),而是要从服务器获取响应时,请在handlePositiveResponse(response)中使用双向数据绑定或this.set来更新路由值:
this.set('route.path', '/my-dashboard');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.