Vaadin Flow路由与参数问题：DisplayView导航失败排查

问题根源 #

你的DisplayView同时使用了两种参数处理方式，导致Vaadin路由解析冲突：

• 路由注解@Route("blappity/display/:id/:blahID")已定义两个路径参数（id和blahID）
• 但视图又实现了HasUrlParameter<String>接口，这个接口用于处理单个参数（查询参数或路径参数），Vaadin会优先判定视图需要通过setParameter方法接收一个String参数，而你传递的是两个路径参数，因此匹配失败，抛出参数缺失的错误。

另外代码存在拼写错误：event.rerouteTo(DisplayVeiw.class, ...)中的DisplayVeiw是笔误，应为DisplayView，这也会导致找不到目标视图类。

修复步骤 #

1. 移除HasUrlParameter<String>接口 #

DisplayView无需实现该接口，路由注解已定义两个路径参数，直接通过BeforeEnterObserver的beforeEnter方法获取参数即可。

2. 在beforeEnter方法中获取路径参数 #

修改DisplayView代码，通过BeforeEnterEvent的getRouteParameters()方法获取参数：

@Route("blappity/display/:id/:blahID")
@Slf4j
public class DisplayView extends VerticalLayout implements BeforeEnterObserver, BeforeLeaveObserver {

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        // 获取路径参数
        String id = event.getRouteParameters().get("id").orElseThrow(() -> new IllegalArgumentException("id参数缺失"));
        String blahID = event.getRouteParameters().get("blahID").orElseThrow(() -> new IllegalArgumentException("blahID参数缺失"));
        
        // 后续业务逻辑处理
        // ...
    }

    @Override
    public void beforeLeave(BeforeLeaveEvent event) {
        // 你的离开逻辑
    }
}

3. 修正MainView中的拼写错误 #

把DisplayVeiw.class改为DisplayView.class：

try {
    event.rerouteTo(DisplayView.class, prepRouteParameters(id, blappityBlah.get().getBlahID()));
} catch (Throwable th) {
    th.printStackTrace(System.err);
    UI.getCurrent().navigate(DisplayView.class, prepRouteParameters(id, blappityBlah.get().getBlahID()));
}

验证逻辑 #

修改后，prepRouteParameters方法生成的RouteParameters会匹配DisplayView的路由路径blappity/display/:id/:blahID，Vaadin会正确解析两个路径参数，不再报错。

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