【Vue.js】ボタンクリックで画面遷移させる

はじめに

こんにちは。
こちらの記事では、ボタンクリックでページ遷移を行う方法を記しています。
誤っている点や不足点等ございましたらコメントいただけると幸いです。

前提

• VueCLIまたはNuxtで新規プロジェクトの作成が既にお済みの方
• 単一ファイルコンポーネントで記述する
• 動作確認はnpm run serveまたはnpm run devのローカル環境で行っている

対象者

• Vue.jsやNuxt.jsを学習中の方
• templateのrouter-linkやnuxt-linkではなく、JavaScript側でページ遷移の処理を行いたい方
• できる限りシンプルな記述で実装したい方

実装手順

ボタンをクリックした際にイベントが発火し、ページ遷移する実装を記述します。
this.$router.push('/')に任意のパスを指定することができます。

template

<button v-on:click="home">ホームへ</button>

script

export default {
  methods: {
    home(){
      this.$router.push('/')
    }
  }
}

また、template側でもrouter-linkやnuxt-linkを使うことで簡単にページ遷移のリンクを生成することができます。

Vue.js

<router-link to="/">ホームへ</router-link>

Nuxt.js

<nuxt-link to="/">ホームへ</nuxt-link>

おわりに

ここまでボタンクリックでページ遷移を行う方法についてまとめました。
template側でVue Routerのリンクを作成する方法はわかっていたのですが、ボタンクリックでJavaScriptの処理を実行したかったため、この方法で実装しました。
コードの可読性が下がるので、特に必要のないときはJavaScript側ではなくtemplate側にリンクを記述するのが好ましいと思いますが、必要なタイミングもあるかと思いますので、この記事を執筆しました。少しでも多くの方の参考になれば嬉しいです^^
以上、最後まで読んでいただきありがとうございました！