You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vaadin应用点击链接时如何实现硬地址跳转避免路由拦截

路由机制变更版本

该链接路由拦截规则的变更从 Vaadin 24.3 版本正式生效:

  • 24.3之前的版本:框架默认拦截所有指向应用内部路径的<a>标签点击事件,直接走客户端路由替换页面组件,不会触发整页重载,无需额外添加属性。
  • 24.3及之后的版本:默认仅对显式添加了router-link属性的内部链接执行客户端路由拦截,普通链接点击会走浏览器原生跳转逻辑。
跳过路由拦截的实现方法

不需要手动绑定点击监听器、阻止事件冒泡后再手动赋值window.location实现跳转,框架原生提供了更简洁的配置方案:

  • 单链接跳过拦截:给对应<a>标签添加router-ignore属性即可,框架识别到该属性后会直接放行,走浏览器原生整页跳转逻辑,不会被路由捕获。
    • 如果是通过Java端API创建组件:使用Anchor组件时直接调用anchor.setRouterIgnore(true)即可,无需手动操作元素属性;非Anchor组件生成的链接可通过element.setAttribute("router-ignore", true)添加属性。
    • 如果是直接编写前端HTML/TSX模板:直接在标签上写<a href="/target" router-ignore>跳转链接</a>即可。
  • 全局关闭默认链接拦截:如果希望所有普通链接默认都不走客户端路由,仅显式标记router-link的链接触发路由导航,可以在前端入口配置文件(通常为frontend/index.ts)中修改路由全局配置:
import { Router } from '@vaadin/router';
// 关闭全局自动锚点链接拦截
Router.options.autoAnchor = false;

注意:24.3之前的版本关闭该配置后,所有需要触发客户端路由的链接都必须手动添加router-link属性,否则会触发整页重载。

内容的提问来源于stack exchange,提问作者Oliver Stahl

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 21:54:21