Nuxt.js【Vue.js】で別タブ（別ページ）で開く方法

Nuxt.js【Vue.js】で別タブ（別ページ）で開く方法になります。

target="_blank"を付与する

<template>
  <div>
    <!-- Nuxt -->
    <nuxt-link to="/demo" target="_blank">ボタン</nuxt-link>　

    <!-- Vue -->
    <router-link to="/demo" target="_blank">ボタン</router-link>
  </div>
</template>

target="_blank"を付与することで、別タブで開くことができます。

methodsなどで別タブ（別ページ）で開く方法

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

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  methods: {
    open() {
      const url = '/demo'
      window.open(url, '_blank')
    }
  }
})
</script>

window.openを使用することで、methodsなどからも別タブで開くことができます。