Nuxt.jsでのページ遷移設定方法（Vue Routerやnuxt-link）｜Nuxt.jsの基本

2022年3月8日

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 の接続しかできない場合はプリフェッチをスキップします。
Nuxt – 組み込みコンポーネント

そんなことまでしてくれるんですね。とりあえず使っといて損はなさそうです。

ちなみに、オフにしたい場合は「no-prefetch」属性を付けるとオフになります。

script内でページ遷移させたい場合

methods内などで、なにか処理をしてからページ遷移させたい場合は「this.$router.push()」を使用します。

<template>
  <a @click="onClickButton">トップページへ遷移</a>
</template>
<script>
export default {
  methods: {
    onClickButton(){
      this.$router.push('/');
    }
  }
}
</script>