Nuxt.jsをはじめよう - nuxt-linkで画面遷移をする

javascript
Nuxt.jsをはじめよう - nuxt-linkで画面遷移をする
目次

前回の記事 では Nuxt.jsプロジェクトの初期化を行いました。 今回はまず Nuxt.js で画面遷移をします。

事前準備：画面を複数準備する

まずは 遷移元ページ と 遷移先ページ の2種類のページを作成します。 Nuxt.js の場合、 /pages ディレクトリ内に任意のディレクトリと .vue ファイルを配置することで、そのファイルパスがURLの文字列になる仕様となっています。

今回は以下のように index.vue と next.vue を配置します。

pages
├── index.vue
└── next.vue

index.vue は以下

1<template>
2<div>
3  <div>Here is First Page</div>
4</div>
5</template>

next.vue は以下のように実装します。

1<template>
2<div>
3    Here is Next page
4</div>
5</template>

npm run dev でアプリケーションを起動し、 ブラウザから http://localhost:3000/ http://localhost:3000/next に直接アクセスできれば準備はOKです。

別画面に遷移する

index.vue の画面から next.vue の画面に遷移させるタグを書きましょう。

アプリケーション内の遷移はnuxt-linkタグ

今回のケースではアプリケーション内のリンクになるので、 <nuxt-link> タグを使います。

index.vue を以下のように編集します。

1<template>
2<div>
3  <div>Here is First Page</div>
4  <nuxt-link to="/next" > Go to Next</nuxt-link>
5</div>
6</template>

nuxt-link の to で遷移先のパスを指定します。これだけです。

なお、 <nuxt-link> タグにはエイリアスがあって、 <n-link> <NuxtLink> <NLink> のいずれの書き方でも同じ動きをします。

別アプリケーションへの遷移はaタグ

外部サービスへのリンクはどうでしょうか。試しにgithubへの遷移を書いてみます。

1<template>
2<div>
3  <div>Here is First Page</div>
4  <!-- ここ -->
5  <nuxt-link to="https://github.io" > Go to Github</nuxt-link>
6</div>
7</template>

この状態でリンクをクリックしてみると http://localhost:3000/https:/github.io に遷移して 404 Not Foundになります。 外部サービスへのリンクは、素直に <a> タグで実装する必要がありそうです。

a タグではなく、 nuxt-link タグを使うメリットはいくつかあります。公式では以下のような説明があったので引用します。

Nuxt.js アプリケーションの応答性を高めるため、viewport（ブラウザの表示領域）内にリンクが表示されたとき、 Nuxt.js はコード分割されたページを自動的に先読みします

また、nuxt-link は Vue.jsにおける router-link を拡張したものであるため、router-link のメリットも享受できます。 router-link のメリットは以下のような記載がありました。

  • HTML5のHistoryモードとハッシュモードの切り替えや、IE9のハッシュモードへの対応でも同じ書き方で対応できる
  • HTML5のHistoryモードならイベントをフックできる
  • HTML5のHistoryモードにおいて base オプションでコンテキストパスを指定して to 側での記載を省略する、といった使い方もできる

参考にさせていただいたサイト