はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はrouter-linkタグを用いてページの切り替えを行う方法について記載していきます。

router-linkタグ

router-linkタグを利用することで、特定のページへ遷移することが可能になります。
通常別のページへ遷移する際は<a>タグを利用します。
しかしながらrouter-linkはaタグとは動きが少し異なり、一つのhtmlファイル内で表示を切り替える、いわゆるSPA（シングルページアプリケーション）の動きを可能にします。

実際に動作を見てみる

今回は朝の挨拶と昼の挨拶をrouter-linkタグを用いて切り替えてみます。
以下ではrouter-linkタグのpropsのtoとactive-classを使用しています。

to → 遷移先
active-class → 現在ページの際に指定されているclass名が付与される

App.vue

<template>
  <router-link to="/" active-class="selected-link">朝の挨拶</router-link>
  <router-link to="/Afternoon" active-class="selected-link">昼の挨拶</router-link>
  <router-view></router-view>
</template>

<style scoped>
.selected-link {
  font-size: 20px;
}
</style>

Morning.vue

<template>
  <div>おはよう</div>
</template>

Afternoon.vue

<template>
  <div>こんにちは</div>
</template>

結果

以下のように朝の挨拶と昼の挨拶を切り替えることができたことが確認できました！

Chromeの検証ツールでネットワークの確認を行ってみると、ページを切り替えても毎回htmlファイルを呼びにいっていないことが分かります。
（写真だと分かりにくいですね...すみません。）

router-linkではなく、aタグで作成するとページを切り替えるたびに毎回htmlファイルが呼ばれていることが見られると思います。

おわりに

面白いことに、router-linkタグで記載しても実際にhtmlファイルに出力された際はaタグに置き換わっているんですよね。
おそらくVue Routerがよしなにやってくれているのだと思うのですが、余裕があったらこの辺りの挙動の違いとかも調べてみたいと思います！