vue-router: Absolute Urls in router-link don't work

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? 😕

the heck?! this thing isnt supported?

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

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

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>

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); } }

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.

+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.

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

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()
})