Vaadin嵌套布局中RouterLink父级链接高亮实现问题

当前在Vaadin嵌套布局的路由链接高亮中存在问题，布局结构如下：

• MainLayout中的路由链接（1号）
• CandidatesLayout中的路由链接（2号）
• CandidateLayout中的路由链接（3号）

目前仅3号链接能正常高亮，1号和2号无法触发高亮效果。已为每个路由链接添加以下代码，用于适配带@RouteAlias("")的路由场景：

link.setHighlightCondition(buildHighLightConditionFor(navigationTarget));

public static HighlightCondition<RouterLink> buildHighLightConditionFor(Class<?> linkTargetClass) {
    return (link, afterNavigationEvent) -> {
        return afterNavigationEvent
                .getActiveChain()
                .stream()
                .anyMatch(element -> {
                    return element.getClass() == linkTargetClass;
                });
    };
}

补充路由配置示例：

@Route(value = "candidates/:profileUuid", layout = CandidateLayout.class)
@AnonymousAllowed

需要扩展上述代码，实现父级布局中1号和2号路由链接的高亮。

原高亮条件仅检查活跃路由链中是否存在精确匹配的目标类，但嵌套布局场景下，活跃链包含当前视图及所有父布局实例，因此需要调整逻辑：除了精确匹配，还要检查目标类是否是活跃链中元素的父布局类，即当前访问的视图/布局的层级链中是否包含该链接的目标类。

修改后的buildHighLightConditionFor方法如下：

link.setHighlightCondition(buildHighLightConditionFor(navigationTarget));

public static HighlightCondition<RouterLink> buildHighLightConditionFor(Class<?> linkTargetClass) {
    return (link, afterNavigationEvent) -> {
        // 1. 保留原逻辑：检查活跃链中是否有精确匹配的类
        boolean hasExactMatch = afterNavigationEvent.getActiveChain()
                .stream()
                .anyMatch(element -> element.getClass() == linkTargetClass);
        
        if (hasExactMatch) {
            return true;
        }
        
        // 2. 新增层级检查：遍历活跃链元素的路由布局层级，判断是否包含目标类
        return afterNavigationEvent.getActiveChain()
                .stream()
                .anyMatch(element -> {
                    Class<?> currentClass = element.getClass();
                    // 逐层向上遍历布局层级
                    while (currentClass != null) {
                        // 检查@Route注解中的布局类
                        Route routeAnnotation = currentClass.getAnnotation(Route.class);
                        if (routeAnnotation != null) {
                            Class<?> layoutClass = routeAnnotation.layout();
                            if (layoutClass == linkTargetClass) {
                                return true;
                            }
                            currentClass = layoutClass;
                        } else {
                            break;
                        }
                    }
                    return false;
                });
    };
}

逻辑说明 #

• 精确匹配逻辑保留，用于处理目标视图直接处于活跃链的场景；
• 层级检查逻辑：对活跃链中的每个元素，逐层向上遍历其@Route注解指定的布局类，只要其中某一层布局类与链接目标类匹配，就触发高亮；
• 例如访问candidates/:profileUuid时，活跃链包含对应视图类、CandidateLayout、CandidatesLayout、MainLayout，此时1号（MainLayout）和2号（CandidatesLayout）链接会因为层级匹配而高亮。

可选优化（适配@RouteAlias场景） #

如果存在@RouteAlias注解的路由，可在层级遍历中同时检查该注解的布局属性，确保别名路由也能正确触发父布局链接高亮：

// 在遍历层级的循环中添加以下代码
RouteAlias aliasAnnotation = currentClass.getAnnotation(RouteAlias.class);
if (aliasAnnotation != null) {
    Class<?> aliasLayout = aliasAnnotation.layout();
    if (aliasLayout == linkTargetClass) {
        return true;
    }
}

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