【Vue.js】Nuxt.jsでvue-routerのルーティング設定【Nuxt.js】

【Vue.js】Nuxt.jsでvue-routerのルーティング設定【Nuxt.js】

今回はVue.jsアプリケーションを簡単にSSR化できるフレームワークであるNuxt.jsの中でも、ルーティング設定をする方法を解説していきます。
かなり簡単なので簡潔に解説していきます。
Nuxt.jsの環境開発については以下のページで解説していますので、環境が整っていない方はぜひご覧下さい。

www.sky-limit-future.com

目次

ディレクトリ構成の確認

pagesディレクトリにファイル追加

ディレクトリ配下にファイルを追加する

動的なルーティング

ディレクトリ構成の確認

www.sky-limit-future.com

このページを参考に作成した場合は以下のような構成になっています。

・assets ディレクトリ
・components ディレクトリ
・layouts ディレクトリ
・middleware ディレクトリ
・pages ディレクトリ
・plugins ディレクトリ
・static ディレクトリ
・store ディレクトリ
・nuxt.config.js ファイル
・package.json ファイル

pagesディレクトリにファイル追加

Nuxt.jsではvue-routerの設定を書いていく必要はありません。
このpagesディレクトリの配下にvueファイルを追加すれば、それが自動でルーティングされます。
例えば、pagesの配下に以下の3ファイルがあるとします。

・index.vue
・page1.vue
・page2.vue

/pages
　├ index.vue
　├ page1.vue
　└ page2.vue

この時、

http://localhost:3000/

• > index.vueにアクセス

http://localhost:3000/page1

• > page1.vueにアクセス

http://localhost:3000/page2

• > page2.vueにアクセス

のようになります。便利ですね。

ディレクトリ配下にファイルを追加する

上記の例だけでは思い通りのルーティングができないかと思います。
例えば、ジャンルごとにディレクトリを分けたいときはどうすればいいでしょうか。

/pages
　├ index.vue
　│　
　├ animal/
　│ ├ dog.vue
　│ └ cat.vue
　│　
　└ drink/
　 ├ coffee.vue
　 ├ water.vue　　
　 └ milk.vue

この時には自動的に以下のようなルーティングが作成されます。

http://localhost:3000/

• > index.vueにアクセス

// animalディレクトリ配下
http://localhost:3000/animal/dog

• > dog.vueにアクセス

http://localhost:3000/animal/cat

• > cat.vueにアクセス

// drinkディレクトリ配下
http://localhost:3000/drink/coffee

• > coffee.vueにアクセス

http://localhost:3000/drink/water

• > water.vueにアクセス

http://localhost:3000/drink/milk

• > milk.vueにアクセス

どうでしょう。より思い通りのルーティングができますね。
しかし、もう一つ重要な書き方があります。

動的なルーティング

動的なルーティングです。例えばユーザーページをユーザーIDごとに出し分けしたいとします。

http://localhost:3000/user/1

• > ユーザーIDが1のユーザーページへ

http://localhost:3000/user/2

• > ユーザーIDが2のユーザーページへ

このようにしたい場合は、以下のようにファイル名の頭にアンダースコアをつけます。

/pages
　├ index.vue
　│　
　└ user/
　 └ _id.vue

まだ奥深い機能はありますが、これらがあれば基本的な実装は可能になります。
以上です。