Vaadin 24：调用ui.navigate后AppNavItem未自动标记为活跃

问题场景 #

使用Vaadin 24时，调用ui.navigate(SomeClass1.class)完成路由跳转后，对应视图的AppNavItem未自动标记为活跃状态。相关代码如下：

AppLayout中的导航初始化：

nav = new AppNav();

AppNavItem subNav1 = new AppNavItem("SomeClass1", SomeClass1.class);
nav.addItem(subNav1);

AppNavItem subNav2 = new AppNavItem("SomeClass2", SomeClass2.class);
nav.addItem(subNav2);

SomeClass2中按钮点击的跳转逻辑：

this.getUI().ifPresent(ui -> ui.navigate(SomeClass1.class));

点击按钮后，原活跃的SomeClass2对应的AppNavItem仍保持活跃状态，手动尝试的afterNavigation逻辑也未生效：

@Override
public void afterNavigation(AfterNavigationEvent p_event) {
     LOG.info(p_event.getLocation().getPath());
     List<AppNavItem> appNavItems = nav.getChildren()
             .map(item -> ((AppNavItem) item))
             .filter(item -> item.getPath().equals(p_event.getLocation().getPath()))
             .collect(Collectors.toList());
     if (!appNavItems.isEmpty()) {
         appNavItems.get(0).getElement().setAttribute("active", "active");
     }
}

错误原因分析 #

手动设置active属性不符合Vaadin组件的内置逻辑，AppNav本身具备自动高亮匹配路由项的能力，问题通常出在：

1. AppLayout未正确监听导航事件，导致AppNav无法感知路由变化
2. 路由类未正确关联父布局，或者导航项的路由映射存在问题

正确解决方案 #

方案1：利用AppNav内置的高亮方法 #

确保AppLayout实现AfterNavigationObserver接口，在导航事件触发时调用AppNav的内置方法更新高亮状态：

public class MainLayout extends AppLayout implements AfterNavigationObserver {
    private AppNav nav;

    public MainLayout() {
        nav = new AppNav();
        // 初始化导航项（注意避免重复变量名）
        nav.addItem(new AppNavItem("SomeClass1", SomeClass1.class));
        nav.addItem(new AppNavItem("SomeClass2", SomeClass2.class));
        // 确保导航栏被添加到布局的导航区域
        addToNavbar(nav);
    }

    @Override
    public void afterNavigation(AfterNavigationEvent event) {
        // 让AppNav自动匹配当前路由并高亮对应项
        nav.highlightRouterLink(event.getLocation());
    }
}

方案2：手动控制活跃状态（备用） #

如果内置方法失效，可遍历导航项手动设置活跃状态：

@Override
public void afterNavigation(AfterNavigationEvent event) {
    String currentPath = event.getLocation().getPath();
    nav.getChildren()
       .filter(AppNavItem.class::isInstance)
       .map(AppNavItem.class::cast)
       .forEach(item -> {
           // 匹配当前路径的项设为活跃，其余设为非活跃
           item.setActive(item.getPath().equals(currentPath));
       });
}

关键检查点 #

• 确保SomeClass1和SomeClass2都添加了@Route注解，且路由路径正确
• 视图类的@Route注解需指定父布局为当前AppLayout（如@Route(layout = MainLayout.class)）
• 初始化导航项时避免重复定义变量名（原代码中两次使用subNav变量会导致编译错误）

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