Vaadin单页应用多路由配置及页面跳转问题咨询

错误原因 #

你配置多路由时写的@Route(value = {"person-form|documentazione-entita"}, layout = MainLayout.class)是错误的：

• 错误地将包含竖线的单个字符串放入数组，Vaadin要求每个路由路径是独立的字符串元素
• 编译器报错Type mismatch是因为写法导致类型不匹配，正确的多路由需用String数组，每个元素对应单独的路由路径

正确的多路由配置 #

将@Route注解修改为以下形式，把两个路由路径分别作为数组元素：

@Route(value = {"person-form", "documentazione-entita"}, layout = MainLayout.class)
@RolesAllowed("USER")
@Uses(Icon.class)
public class NuovaPraticaView extends Div {
    // 类原有内容不变
}

导航跳转注意事项 #

你在按钮点击事件中使用UI.getCurrent().navigate(DocumentazioneEntita.class)是正确的，但需确保DocumentazioneEntita类本身已正确配置@Route注解，示例：

@Route(value = "documentazione-entita", layout = MainLayout.class)
public class DocumentazioneEntita extends Div {
    // 视图内容
}

修改后完整代码示例 #

@Route(value = {"person-form", "documentazione-entita"}, layout = MainLayout.class)
@RolesAllowed("USER")
@Uses(Icon.class)
public class NuovaPraticaView extends Div {

    private TextField firstName = new TextField("First name");
    private TextField lastName = new TextField("Last name");
    private EmailField email = new EmailField("Email address");
    private DatePicker dateOfBirth = new DatePicker("Birthday");
    private PhoneNumberField phone = new PhoneNumberField("Phone number");
    private TextField occupation = new TextField("Occupation");

    private Button cancel = new Button("Cancel");
    private Button save = new Button("Save");

    private Binder<SamplePerson> binder = new Binder<>(SamplePerson.class);

    public NuovaPraticaView(SamplePersonService personService) {
        addClassName("nuova-pratica-view");

        add(createTitle());
        add(createFormLayout());
        add(createButtonLayout());

        binder.bindInstanceFields(this);
        clearForm();

        cancel.addClickListener(e -> clearForm());
        save.addClickListener(e -> {
            personService.update(binder.getBean());
            Notification.show(binder.getBean().getClass().getSimpleName() + " details stored.");
            clearForm();
            UI.getCurrent().navigate(DocumentazioneEntita.class);
        });
    }

    private void clearForm() {
        binder.setBean(new SamplePerson());
    }

    private Component createTitle() {
        return new H3("Nuova Pratica");
    }

    private Component createFormLayout() {
        FormLayout formLayout = new FormLayout();
        email.setErrorMessage("Please enter a valid email address");
        formLayout.add(firstName, lastName, dateOfBirth, phone, email, occupation);
        return formLayout;
    }

    private Component createButtonLayout() {
        Button button = new Button("Salva ed Esci", event -> UI.getCurrent().navigate(DocumentazioneEntita.class));
        HorizontalLayout buttonLayout = new HorizontalLayout(button);
        buttonLayout.addClassName("button-layout");
        save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        buttonLayout.add(save);
        buttonLayout.add(cancel);
        
        return buttonLayout;
    }
}

内容的提问来源于stack exchange，提问作者James