createWebHistory with relative path

[Hellmy]

What problem does this feature solve?

I have a tricky question and a working example is difficult as you also need a reverse proxy… but I hope you get my point when you try understanding following setup (vue3 with vue-router4)
Configure vue app with in index.html
The router is configured with createWebHistory()
The App is served from a subpath like example.com/my-app/
I want to have relative base url as I only want to build one image and use it on different paths.

What is expected:
The base routing path is appended to the current path, so a about page on /about looks like example.com/my-app/about

What is happening:
The route prefix “my-app” is deleted and navigation is internally working but the urls is wrong as it is example.com/about

When i configure my base with createWebHistory('/my-app/) i loose the possiblity to deploy my container on different context-paths with only one container. I would always have to rebuild the container what I want to avoid.

What does the proposed API look like?

createWebHistory works with relative path
Alternative would be a inspection of the base-href

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

[Hellmy]

I posted to the forum and no applicable answer and I described that it's currently not possible - so why it's not a feature/bug request?

[LinusBorg]

Alternative would be a inspection of the base-href

you mean like this?

createWebHistory(document.querySelector('base').href)

Nothing's stopping your from doing this if the backend provides the <base> in index.html

[Hellmy]

But I would define in the base href './' and not the application path itself. Possible I would need to inspect the window.location.pathname somehow, but that would be very dynamic and I would only inspect it after application load but I would expect this work somehow from the router and not from my application code.

[LinusBorg]

The webHistory can't work reliably on a relative path. That's just a technical fact. See this:

1. You have a route for / and one for /a, and a relative base path.
2. You deploy this app in a subfolder called /a as well.
3. You directly visit the page in your browser by typing in yourdomain.com/a.

Should the router match the / or /a route? Without knowledge about the absolute base path, that's impossible for the router to determine. This information has to be provided to the router somehow, either at build time or at runtime, i.e. through <base>

[Hellmy]

I don't know how angular does ist, but there the router can work with a relative base path like <base href='./' />
When I define this relative base path <base href='./' /> in vue the router just deletes the subpath from the url. The route prefix “my-app” is deleted and navigation is internally working but the urls will be example.com/about instead of example.com/my-app/about

[LinusBorg]

I can't say I know Angular intimitely, but all examples of using <base href> in Angular use an absolute path. Likely for the same reason as I gave for VueRouter.

[Hellmy]

From my understanding the router should start from the index.html and from there take over all the routing path.

I have an angular application with <base href="./" /> up and running and it just works with one container and multiple deployments. That's why I'm searching this possibility now in vue.
But you could be right that are some limitations when the deployment path is somehow equivalent ot a route... Perhaps I can somehow build a demo with a dev-server and included the reverse proxy to tryout some more thougts.

[LinusBorg]

The issue is that a relative base works as long as you start the app from that URL, and then navigate to other routes.

When you start at a nested route (i.e. by having clicked on a link to yourappp.com/sub-path/actual-route/1, then the relative path will mess up things, because now the base is yourappp.com/sub-path/actual-route/1 while you would need it to be yourappp.com/sub-path/, and /actual-route/1 to be the route.

[Hellmy]

Interesting explanation, thank you! I will try to verify that and come back to you, so we could improve the documentation about this? Am 15. Dezember 2021 15:01:35 MEZ schrieb "Thorsten Lünborg" ***@***.***>:

…

The issue is that a relative paths works as long as you *start* the app from that URL, and *then* navigate to other routes. When you *start* at a nested route (i.e. by having clicked on a link to `yourappp.com/sub-path/actual-route/1`, then the relative path will mess up things, because now the base is `yourappp.com/sub-path/actual-route/1` where you would want it to be `yourappp.com/sub-path/`. -- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: #1245 (comment)

[LinusBorg]

sure

[Hellmy]

@LinusBorg I verified your description - thanks again.
I found also a lot of discussions on stackoverflow.com where also a proposal was made to set the base path dynamically in the index html https://stackoverflow.com/a/39084260 same idea I posted here and I think that would work also with the vue Router but you must improve it's just a bit for development.

[coldpumpkin]

I agree with this. It's like basic 101 must-have. RIP apps being served in relative paths.