【Nuxt.js】 超基本的なルーティングについての備忘録

目的

下記の読者・将来の自分への技術的な備忘録

• 「 Nuxt.js でページのルーティングを実装してみたい 」という方
• 「 あれ？Nuxtでルーティングってどうやるんだっけ？ 」という方

目次

• 前提条件
  
• 実装（ルーティング）
• まとめ

前提条件

Nuxtアプリケーションを「npm run dev」で開発環境サーバー（"http://localhost:3000/"） が立ち上げられている状態。

ディレクトリ構成

- nuxt-app
  - pages
    - navi (*今回追加)
      - mypage.vue (*今回追加)

*「nuxt-app」は作成したアプリケーション名。
今回、新たに「pages」と「mypage.vue」を作成する。

実装（ルーティング）

実装手順

1.「pages」のディレクトリ内に「navi」ディレクトリを作成する。
2.「navi」ディレクトリ内に「mypage.vue」ファイルを作成する。
3.「mypage.vue」に下記内容を記述する。

<template>
<h1>MyPage</h1>
</template>

4.「pages」のディレクトリ内の「index.vue」に下記を追加する。

<nuxt-link to="/navi/mypage">MyPage</nuxt-link>

確認

開発環境サーバー（"http://localhost:3000/"） で上記の「index.vue」で追加した「Mypage」リンクをクリックすると、追加したMypage（"http://localhost:3000/navi/mypage"） へ遷移する。
遷移先のページで「mypage.vue」が表示されたら実装完了。

まとめ

ルーティングがディレクトリ構成によって構築されるのは、新鮮だった。余談だが 「npm run dev」 コマンドを実行すると、「.nuxt/router.js」にルーティング情報が記述されている為、無事ルーティングが出来ていることも確認した。