Vue Routerで別ウィンドウでページを表示する方法[VUE.JS]

Vue.jsを使用している環境で別ウィンドウで表示しなければならない場合の方法です。

とはいってもJavaScriptを普通に使う実装なので簡単です。

基本的な使い方（Vue.jsのみでもOK,Router無）

javascript

// html
<button type="button" @click="linkToOtherWindow('遷移先URL')">ボタン</button>

// script
export default {
  methods: {
    linkToOtherWindow (url) {
      window.open(url, '_blank')
    }
  }
}

単純に、window.openに対して、urlを渡してあげるだけですね。

特に問題ないと思います。そもそも_blankで開いているだけなので、実装が必要なのは、メソッドを呼び出す必要がある場合だけだと思います。

Vue Routerを使用して別ウィンドウで開く方法

Vue Routerを通して別ウィンドウで開く場合は、ひと手間かかります。

router.resolveを使用して前もってURLを解決しておきます。

そうすることでqueryやparamsでデータを渡すこともできます。

生成されたURLはresolvedRoute.hrefで取得可能です。

javascript

//プロフィールページのroutingの設定の場合
const Profile= {
    template: '<div>Profile No.{{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/profile/:id',name='profilePage', component: Profile}
  ]
})

// script window.open に解決されたurlを渡す
export default {
  methods: {
    linkToOtherWindow() {
      let resolvedRoute = this.$router.resolve({
        name: profilePage,
        params: {id: "someData"}
      });
      window.open(resolvedRoute.href, '_blank');
    }
  }
}

Vue 3から使えるかも（未検証）

css

<router-link :to="{ name: 'profilePage'}" target="_blank">
   LINK TO OTHER WINDOW
</router-link>

methodの書き方とか今回はES6にしてみました。ES5などでLINTしていると引っかかるかもしれません。

VUE.JSおすすめの書籍

書籍は読む方だと思いますが、やはり現場で実装するとより深く学べるのを実感します。

逆に実装中心だと、より良いコーディングを考えることができなくなるので書籍もあらためて読むことをおすすめします。

JavaScript、Vue.jsの知識がある程度ある方向け

📦

Amazon で関連書籍・ツールを検索

Vue.js フロントエンド入門

Amazonで探す →（アソシエイトリンク）