Vue-router: [feature] External url

[blake-newman]

Having the option to use the router.go API to allow going to external links would be nice.

However this can be simply achieved in vanilla JS, I had one scenario where a button linked to an external site under one condition and internal routing under another. Putting a href and v-link is not possible as href get replaced.

This is a nice to have feature, but I can see some relevant use cases.

[tejitak]

Doesn't the following example cover the your use case?

<template>
<div>
  <a @cilck="onClickButton">Button</a>
</div>
</template>

<script>
export default {
  methods: {
    onClickButton () {
      if (/*check some conditions*/) {
        location.href = 'https://external.com/'
      } else {
        this.$router.go({....})
      }
    }
  }
}
</script>

[blake-newman]

Yes it can be achieved this way, it's may actually add alot more logic to fully cover this anyway. Best to keep to user land.

[webmasterslava]

This example doesn't work if you want to open the external link in the new tab. Using window.open() could be restricted by browser popup blocking.

[pxwee5]

@tejitak Is that the proper way to use vue router so that links will support both absolute and relative url ?

Did some research and this is the simplest solution I can come up with. I still can't find a reason why router-link doesn't support external urls.

<template v-for="(link, i) in links">
  <a v-if="RegExp('^https?://|^//').test(link.path)" :key="i" :href="link.path" class="c-nav__link" :title="link.name">{{ link.name }}</a>
  <router-link v-else :key="i" :to="link.path" class="c-nav__link" :title="link.name">{{ link.name }}</router-link>
</template>

[johncade]

👍