Vaadin 23如何配置Jobs下的动态与静态页面路由？

现有视图代码 #

@Component
@Scope("prototype")
@Route(value = "jobs", layout = JobsLayout.class)
@PageTitle("Jobs")
@AnonymousAllowed
public class AllJobsView extends VerticalLayout implements LocaleChangeObserver {
    // 视图逻辑
}

当前该视图对应路由 /jobs，需要新增以下路由：

• 动态路由 /jobs/{job_id}/{job_name_slug}（示例：/jobs/123/solutions-architect），用于展示职位详情
• 静态子路由 /jobs/{job_id}/edit 和 /jobs/{job_id}/apply，分别用于编辑职位和申请职位

路由配置实现 #

Vaadin 中可以通过 @Route 注解的 value 属性结合路径参数、父路由关联来实现这些需求，每个路由对应独立的视图类：

1. 职位详情视图（动态路由 /jobs/{job_id}/{job_name_slug}） #

创建独立的 JobDetailView，通过带参数的路由值定义路径，并关联父路由继承布局：

@Component
@Scope("prototype")
@Route(value = ":job_id/:job_name_slug", layout = AllJobsView.class)
@PageTitle("Job Detail")
@AnonymousAllowed
public class JobDetailView extends VerticalLayout implements HasUrlParameter<String>, LocaleChangeObserver {

    @Override
    public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
        // 解析路由参数
        Map<String, String> parameters = event.getRouteParameters().getParameters();
        String jobId = parameters.get("job_id");
        String jobNameSlug = parameters.get("job_name_slug");
        
        // 此处添加根据ID和slug加载职位详情的业务逻辑
    }
}

• :job_id 和 :job_name_slug 是动态参数占位符，Vaadin 会自动解析URL中的对应值
• 通过 event.getRouteParameters() 可获取所有路由参数

2. 职位编辑视图（静态子路由 /jobs/{job_id}/edit） #

创建 JobEditView，路由值设置为带参数的静态子路径：

@Component
@Scope("prototype")
@Route(value = ":job_id/edit", layout = AllJobsView.class)
@PageTitle("Edit Job")
// 可根据权限需求替换注解，比如@RolesAllowed("ADMIN")
@AnonymousAllowed
public class JobEditView extends VerticalLayout implements HasUrlParameter<String>, LocaleChangeObserver {

    @Override
    public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
        String jobId = event.getRouteParameters().get("job_id").orElse(null);
        // 加载职位信息并渲染编辑表单
    }
}

3. 职位申请视图（静态子路由 /jobs/{job_id}/apply） #

创建 JobApplyView，路由值设置为对应静态子路径：

@Component
@Scope("prototype")
@Route(value = ":job_id/apply", layout = AllJobsView.class)
@PageTitle("Apply for Job")
@AnonymousAllowed
public class JobApplyView extends VerticalLayout implements HasUrlParameter<String>, LocaleChangeObserver {

    @Override
    public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
        String jobId = event.getRouteParameters().get("job_id").orElse(null);
        // 渲染职位申请表单
    }
}

关键说明 #

• 父路由关联：通过 layout = AllJobsView.class，新视图会自动继承 AllJobsView 绑定的 JobsLayout，保持页面布局一致性
• 参数获取：实现 HasUrlParameter 接口后，在 setParameter 方法中通过 RouteParameters 提取动态参数，支持单个或多个参数
• 路由优先级：Vaadin 会自动匹配最具体的路由，比如 /jobs/123/edit 会优先匹配 JobEditView，而非 JobDetailView

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