Nuxt.jsでのページ遷移設定方法（Vue Routerやnuxt-link）｜Nuxt.jsの基本
Nuxt.jsでもVue Routerを使っているので、Vue CLIと同様にVur Routerの機能が使えますが、それをさらに拡張したnuxt-linkが使えます。
template内の遷移タグ
Vue Routerの<router-link>はもちろん使えます。
<router-link :to="/">トップページへ遷移</router-link>しかし、せっかくNuxt.jsを使うのであれば<nuxt-link>を使った方が良さそうです。
基本的な使い方は<router-link>と同じです。
<nuxt-link to="/">トップページへ遷移</nuxt-link>もしくは<NuxtLink>でもできるみたいですが、基本小文字の方がHTMLが統一されるので、<nuxt-link>の方がオススメです。
<NuxtLink to="/">トップページへ遷移</NuxtLink>どちらもブラウザで生成されるのは<a>タグになります。
nuxt-linkのメリット
具体的な<nuxt-link>を使うメリットとしては、「ブラウザの表示領域に<nuxt-link>があると、その先のページを自動的に先読みしてくれる」ことみたいです。
Nuxt は自動的にスマートプリフェッチングをサポートしています。
つまり、ビューポートまたはスクロール時にリンクが表示されたことを検知し、そしてユーザーがリンクをクリックしたときにすぐに使えるよう、ページにおいて JavaScript をプリフェッチします。Nuxt はブラウザがビジー状態でないときにのみリソースをロードし、接続がオフラインの場合や 2g の接続しかできない場合はプリフェッチをスキップします。
そんなことまでしてくれるんですね。とりあえず使っといて損はなさそうです。
ちなみに、オフにしたい場合は「no-prefetch」属性を付けるとオフになります。
script内でページ遷移させたい場合
methods内などで、なにか処理をしてからページ遷移させたい場合は「this.$router.push()」を使用します。
<template>
<a @click="onClickButton">トップページへ遷移</a>
</template>
<script>
export default {
methods: {
onClickButton(){
this.$router.push('/');
}
}
}
</script>戻る・進むを実装する
「戻る」ボタンを実装して、ページを1つ前に戻したい場合は下記コードを使用します。
this.$router.go(-1);逆に「進む」ボタンを実装して、ページを1つ進めたい場合は下記コードです。
this.$router.go(1);
