vaadin登錄成功后如何進入主頁

Question

我正在嘗試使用vaadin登錄來實現登錄頁面。 成功登錄后，我不知道如何導航到另一個頁面（ main-view.js ）。 以下是代碼段

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-login/vaadin-login-form.js';
import '@vaadin/vaadin-dialog/vaadin-dialog.js';

class LoginView extends PolymerElement {
static get template() {
    return html`
        <style>
            :host {
                display: flex;
                justify-content: center;
                background: var(--main-background);
                padding: var(--main-padding);
            }
        </style>
        <vaadin-login-form id="login"></vaadin-login-form>
        <vaadin-dialog id="feedbackDialog">
            <template>Login is being processed...</template>
        </vaadin-dialog>
        <vaadin-dialog id="supportDialog">
            <template>Please contact support.</template>
        </vaadin-dialog>
    `;
}

ready() {
    super.ready();
    console.log('ready');
    const that = this;
    this.$.login.addEventListener('login', function(e) {
        let detail = e.detail;
        console.log(detail);
        that.$.feedbackDialog.opened = true;
        setTimeout(function() {
            let isLogged = that._loginAttempt(detail.username, detail.password);
            if(isLogged) {
                that.$.login.disabled = false;
                that.$.feedbackDialog.opened = false;
            }
        }, 2000);
    });
    this.$.login.addEventListener('forgot-password', function() {
        that.$.supportDialog.opened = true;
    });
}

_loginAttempt(username, password) {
    if(username === 'admin' && password === 'admin') {
        this.userData.logged = true;
        return true;
    } else {
        this.$.login.error = true;
        return false;
    }
}
}
window.customElements.define('login-view', LoginView);

在_loginAttempt函數中，我正在檢查用戶名和密碼是否正確。 如果是，那么如何移動main-view ？

謝謝

Answer 1

您可以使用以下組件來管理頁面導航：

import "@polymer/app-route/app-location.js";
import "@polymer/app-route/app-route.js";
import "@polymer/iron-pages/iron-pages.js";

這是一個基本用法示例：（位於my-app.js）

static get template() { return html`
 <app-location route="{{route}}"></app-location>
 <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>
 ....
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="main" >  

   <main-view name="main""></main-view>
   <login-view name="login""></login-view>
</iron-page>
`}

 static get properties() { return {
        page:{
            type:String,
            reflectToAttribute:true,
            observer: '_pageChanged'
        }
 }}

並在login-view.js：

 import '@polymer/app-route/app-route.js';
 ... 
  static get template() { return html`
     <app-location route="{{route}}"></app-location>
 ...
 if(isLogged) {
        that.$.login.disabled = false;
        that.$.feedbackDialog.opened = false;
        this.set('route.path', '/main')

 }