Nuxt.jsで外部サイト（URL）へ遷移する方法

Nuxt.js（Vue）で外部サイト（URL）へ遷移する方法です。

aタグで遷移

<template>
  <div>
    <a href="https://www.yahoo.co.jp/">リンク</a>
  </div>
</template>

内部へのリンクでしたら<nuxt-link to=""></nuxt-link>が使えますが、外部リンクでは使用できません。

scriptで遷移

イベント後に外部サイトへリンクしたい場合などは、scriptで記述します。

<template>
  <div>
    <button @click="externalLink">ボタン</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  methods: {
    externalLink() {
      const url = 'https://www.yahoo.co.jp/'
      window.location.href = url
    }
  }
})
</script>

上記の例では、clickイベント後にwindow.location.hrefで外部URLに遷移させています。
別タブで外部サイトを開きたい場合は、window.open()を使用します。

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  methods: {
    externalLink() {
      const url = 'https://www.yahoo.co.jp/'
      window.open(url, '_blank')
    }
  }
})
</script>

何か処理をしたあとで、ページ遷移させたい時などに有効です。