VueJS : how NOT to concatenate a link url?

Question

I'm at the start of a new project and I'm trying to render a list of links. My links urls are stored in a table under the format "www.sitename.com". They render alright, but when I click on one of them, instead of being redirected to "www.sitename.com", what I get is this: "localhost/8080/www.sitename.com". So, if I understand correctly, it means that VueJS concatenates by default the :href="" with the current url? How do I prevent this?

I solved my issue by hard-coding a 'https://' substring into my Vue component (see below), but I believe there might be better ways to fix this behavior. Any input is welcome.

<template>
  <div :key="link.id">
    <a 
      :href="'https://' + link.url"
      target="_blank"
    >
      {{link.title}}
    </a>
  </div>
</template>

<script>
export default {
  name: "Link",
  props: ["link"]
};
</script>
´´´

Cianekjr · Accepted Answer · 2021-11-05 20:42:35Z

1

https://url.spec.whatwg.org/#valid-url-string

A valid URL string must be either a relative-URL-with-fragment string or an absolute-URL-with-fragment string.

https://en.wikipedia.org/wiki/Uniform_Resource_Identifier

Absolute URL must contain scheme:

A URI reference is either a URI, or a relative reference when it does not begin with a scheme component followed by a colon (:).

Therefore www.sitename.com is treated like a relative URL.

https://www.contentkingapp.com/academy/urls/faq/absolute-vs-relative/#:~:text=A%20relative%20URL%20is%20a,as%20the%20page%20it's%20on.

A relative URL is a URL that only includes the path. The path is everything that comes after the domain, including the directory and slug. Because relative URLs don't include the entire URL structure, it is assumed that when linking a relative URL, it uses the same protocol, subdomain and domain as the page it's on.

To sum up, path which starts with www is treat as relative url. You want redirect to other domain, so you have to include scheme (e.g. http:, https:).

answered Nov 5, 2021 at 20:42

Cianekjr

3841 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Valentin Massart Over a year ago

Thanks a lot. So, I understand that a simple way to prevent this issue would be to store the urls in my database with the scheme (https://www.sitename.com), am I right?

Collectives™ on Stack Overflow

VueJS : how NOT to concatenate a link url?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related