Vaadin页面内锚点跳转异常问题咨询

这是Vaadin SPA路由的特性导致的问题，并非你对锚点的理解有误。

问题根源 #

Vaadin的SPA路由机制在处理页面内锚点时，默认会基于window.location.origin拼接锚点URL，而非使用包含当前路径和查询参数的完整window.location.href。这就导致你的锚点被解析成http://onepub.dev/#how-to-resolve-the-problem，而非正确的https://onepub.dev/Blog?id=zhhnoflygz#how-to-resolve-the-problem。点击后路由跳转到缺少路径和参数的首页，自然无法定位到页面内的目标元素。

即使添加router-ignore="true"属性，也只是让Vaadin不通过自身路由处理跳转，但它内部对锚点URL的拼接逻辑并未改变，所以问题依然存在。

可行的解决方法 #

1. 手动拦截锚点点击事件
   给页面内的锚点添加自定义标识（比如类名），通过JavaScript手动处理跳转逻辑，直接定位到目标元素并更新URL的hash部分：

// 假设锚点都带有internal-anchor类
document.querySelectorAll('.internal-anchor').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href').slice(1);
    const targetEl = document.getElementById(targetId);
    if (targetEl) {
      targetEl.scrollIntoView({ behavior: 'smooth' });
      // 更新URL hash，保留当前路径和参数
      const baseUrl = window.location.href.split('#')[0];
      window.history.pushState({}, '', `${baseUrl}#${targetId}`);
    }
  });
});

2. 动态生成完整的锚点URL
   在渲染HTML内容时，动态将锚点的href属性替换为包含当前完整路径、查询参数和hash的URL。比如：

<!-- 原锚点 -->
<a href="#how-to-resolve-the-problem" class="internal-anchor">How to resolve the problem</a>
<!-- 动态替换后 -->
<a href="https://onepub.dev/Blog?id=zhhnoflygz#how-to-resolve-the-problem" class="internal-anchor">How to resolve the problem</a>

这种方式需要在后端或前端渲染时，根据当前页面的URL动态拼接锚点地址，确保href指向正确的页面内位置。

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