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

URL: https://webrandum.net/nuxt-link/
公開日: 2022-03-08
更新日: 2022-03-08
カテゴリー: コーディング
タグ: Nuxt.js
出典: Webrandum（著者: サイトウ マサカズ）

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>
```

## 戻る・進むを実装する

「戻る」ボタンを実装して、ページを1つ前に戻したい場合は下記コードを使用します。

```
this.$router.go(-1);
```

逆に「進む」ボタンを実装して、ページを1つ進めたい場合は下記コードです。

```
this.$router.go(1);
```