I have a vaadin app which renders raw html into a vaadin layout.
The html includes a anchor and a href that points to the anchor.
The problem is that my page includes a path and a query:
https://onepub.dev/Blog?id=zhhnoflygz
This above link is to a live page so you can see it in action.
The target is written as:
<h1 id="how-to-resolve-the-problem">How to resolve the problem</h1>
The anchor is written as:
<a href="#how-to-resolve-the-problem">How to resolve the problem</a>
When I hover over the anchor the browser shows:
http://onepub.dev/#how-to-resolve-the-problem
Looking at html documentation and examples it's my understanding that the anchor should show as:
https://onepub.dev/Blog?id=zhhnoflygz#how-to-resolve-the-problem
As it stands, when I click on the anchor it takes me to the sites home page rather than scrolling down to the section the anchor links to.
Is this a vaadin SPA problem or have I just mis-understood how anchors work?
The anchor works find in a html editor.
Edit:
After some research I've found that vaadin intercepts clicks to anchors.
You can surpress this by adding the 'router-ignore' attribute to the a tag.
<a href="#link-in-page" router-ignore="true">hi</a>
This however didn't solve my problem.
I then did a comparison by setting up a test using the w3schools tryit page.
There is a clear difference. When I open the dev tools in chrome and hover over the 'a' link on my vaadin site it shows
When I look at a similar tag in w3schools:
The key difference is that w3schools shows the complete url which appears to be taken from 'window.location.href'
The vaadin page however seems to take the url form 'window.location.origin' even though window.location.href has the correct url including the path and query params.
