Absolute Urls in router-link don't work

[smitt04]

I get a absolute url from an API that determines the permanent url of the page. When i add the url to router-link :to="absouluteUrl" the url gets auto appended with a / and makes it act as a relative url. I think it should detect if it is an absolute url or not. Even if it is absolute the router should still work on the same domain.

[posva]

I don't think it's a good idea to pass absolute URLs. If you know your url is relative, why don't get directly the relative link from the API? The router is meant to work on a single domain, so having a router-link pointing to an absolute domain is weird.

This is also really easy to achieve in userland: if you cannot change the API you can easily detect if the URL is from the same domain and get the relevant path (here is a little trick for that. You can also achieve it with regexes)

ping @fnlctrl

[fnlctrl]

Yeah.. If it's an absolute url provided by an API, why not use <a> tags instead? <router-link>s are only meant for routing within the app.

[smitt04]

The API is a general API that works for both our web and mobile apps. On mobile it needs to be an absolute url to show in a webview, but when on web we want those urls to route internally. It is an old legacy database so we can't make it as nice as it should be. Also detecting if it is same domain is a little more difficult in SSR scenarios. So for now i added another property to the API object that has relative url. But it would of been nice to not have to have relativeUrl and absoluteUrl as separate properties.

[posva]

But it would of been nice to not have to have relativeUrl and absoluteUrl as separate properties.

I understand, however, that's a very specific case. Did you find any other cases where this may happen?

[EduardoRFS]

<router-link> really need to change the url? if just keep the url, works with absolute and relative

[posva]

Closing because it's something that router-link isn't meant for and can be easily achievable in userland.

[ydnar]

Related: #1280

[homerjam]

easily achievable in userland.

This is debatable. I would argue it adds a lot of unnecessary, easily avoidable boilerplate. I now need to include a wrapper component in every Vue project just to allow relative and absolute urls interchangeably? 😕

[EduardoRFS]

agreed with @homerjam that's unnecessary. And in almost every project, it's really useful to having the same component for relative and absolute. An interesting solution it's a attribute as flag absolute, having that on the component make it support absolute references, and a way to make it default in projects.

I've some time, if that is fine i can make a PR

[vespoli]

Not a perfect solution but for anyone looking for a workaround for this problem I've implemented the following in my routes to catch the odd full url that comes through the api: { path : '/http*', beforeEnter: (to, from, next) => { window.location.href = to.fullPath.substring(1); } }

[radislaw]

How about absolute path to entirely another web site. We have some promotion blocks in home page. In most cases there should be relative links to promotion page, but some times we need link to external site. Router link wraps whole big component whith images and so on. But if there is absolute path we forsed use plain a tag, i.e another component that duplicate entire logic

<router-link :to="relative.path">bunch of tags</router-link>

<a :href="absolute.path">same bunch of tags</a>

[earthboundkid]

I have the same problem as Radislaw. I have a menu with some internal and some external links.

[nick-dolan]

I agree, router-link should support absolute URLs, or we need to create wrappers to show or depending on the type of link if this link is dynamic.

+1 to this issue. I'm currently working on project with some urls in nuxt and some in iis. And I don't want to duplicate every single link just because I don't know if it will be handled in nuxt or in iis.

[ghost]

the heck?! this thing isnt supported?

[m-demydiuk]

+1 that router-link should support absolute urls. I have the same problem, my api returns menu, and some links are absolute urls. Now I need to do some additional wrappers to make it work.

[mythz]

It's annoying everyone has to come up with their own custom solution to have a single component that handles both relative and absolute URLs, but here's what works best for me:

router.beforeEach((to, from, next) => {
    if (to.path.startsWith('/http')) 
        location.href = to.path.substring(1)
    else next()
})