Vaadin 20 Flow项目中如何从TS模板正确跳转服务端Java定义路由

你不需要额外配置Fusion客户端路由，直接使用Vaadin Flow内置的客户端路由能力即可，有两种常用实现方案：

方案1：使用router-link属性（最简方案） #

直接给你的<a>标签添加router-link属性，Flow客户端脚本会自动识别这类标签，拦截点击事件并走Flow内置的路由逻辑，不会触发全页刷新，完全兼容服务端@Route配置的路由：

// vaadin-nav.ts 模板部分示例
render() {
  return html`
    <nav class="custom-nav">
      <!-- 只需添加router-link属性，href和@Route的value保持一致即可 -->
      <a href="/about" router-link>关于页面</a>
      <a href="/home" router-link>首页</a>
      <a href="/user/list" router-link>用户列表</a>
    </nav>
  `;
}

方案2：调用内置导航API（灵活可控） #

如果需要在跳转前做额外逻辑判断（比如权限校验、参数拼接），可以调用Flow暴露的全局导航方法：

// vaadin-nav.ts 逻辑示例
private handleNavToAbout() {
  // 可在这里添加自定义前置逻辑
  if (userHasPermission) {
    // 调用Flow内置导航方法，参数为服务端配置的路由路径
    window.Vaadin.Flow.navigate('/about');
  }
}

render() {
  return html`
    <button @click=${this.handleNavToAbout}>跳转到关于页</button>
  `;
}

注意事项 #

• 路径需和Java代码中@Route(value = "xxx")的配置完全匹配，建议使用带前缀斜杠的绝对路径，避免嵌套路由场景下的路径错误
• 无需引入Fusion Router相关依赖，也无需配置客户端路由表、路由出口，Flow会自动同步服务端注册的所有路由信息，内置逻辑会完成后续的视图渲染流程

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