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>即可。
- 如果是通过Java端API创建组件:使用
- 全局关闭默认链接拦截:如果希望所有普通链接默认都不走客户端路由,仅显式标记
router-link的链接触发路由导航,可以在前端入口配置文件(通常为frontend/index.ts)中修改路由全局配置:
import { Router } from '@vaadin/router'; // 关闭全局自动锚点链接拦截 Router.options.autoAnchor = false;
注意:24.3之前的版本关闭该配置后,所有需要触发客户端路由的链接都必须手动添加
router-link属性,否则会触发整页重载。
内容的提问来源于stack exchange,提问作者Oliver Stahl
相关产品推荐
相关产品推荐

