🌳

（pending）【Nuxt.js】URLの一部を動的部分と静的部分を組み合わせてルーティング設定しようとした話

2021/04/09に公開

Nuxt

ルーティング

tech

Nuxt.jsのルーティング設定について。
結論から言うと動的部分と静的部分を混合させてURL作成するのは難しいのでURL見直した方がいいと思う。

Nuxtのルーティング

pages直下にディレクトリを作っていくことでルーティング設定ができる。作成すると基本的に(ルーティング拡張している場合を除いて).nuxt/router.js内に情報が自動で追加される。
さらに、ディレクトリ名・ファイル名の先頭に_(半角アンダーバー)を付与することでパラメータを受け取るページを作成することができる。複数続けることも可能。

ディレクトリ構造

/pages/
--| soccer/
-----| index.vue
-----| jleague/
--------| index.vue
--------| _category/
-----------| _id.vue
--| index.vue

.nuxt/router.js

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'soccer',
      path: '/soccer',
      component: 'pages/soccer/index.vue'
    },
    {
      name: 'soccer-jleague',
      path: '/soccer/jleague',
      component: 'pages/soccer/jleague/index.vue'
    },
    {
      name: 'soccer-jleague-category',
      path: '/soccer/jleague/:category/:id',
      component: 'pages/soccer/jleague/_category/_id.vue'
    }
  ]
}

ディレクトリ構造がそのままパスとして設定できるのは便利ですよね、という話。vueだったらルーティング設定は手動なので。

localhost:3000/
localhost:3000/soccer
localhost:3000/soccer/jleague
localhost:3000/soccer/jleague/1/8

この辺は公式にも丁寧な説明がある。

やろうとしたこと

以下のパスを作ろうとしたけど、上手くいかなかった。{}内が動的部分。

localhost:3000/soccer/jleague/category-{id}/club-{id}

動的部分と静的部分とを混合させて、localhost:3000/soccer/jleague/category-1/club-8とかlocalhost:3000/soccer/jleague/category-2/club-6みたいに対応できるURLを作れないのかなと。

以下、無理やり試したこと。
_(半角アンダーバー)以降が動的になるように設定。しかしこれだと静的ルーティングだと見なされ期待通りにならず。

'pages/soccer/jleague/category-_id/club-_id.vue'

じゃあ先頭部分に書けばいいのかということで、動的部分が混じっているものはとりあえず動的ルーティングとして設定。
これだとURLからidの部分だけとってきてパラメータを設定するためにルーティングを拡張するだとか、ゴリゴリ書いていけば達成できそうな感じはある。

'pages/soccer/jleague/_category-id/_club-id.vue'

ただここまでやるのは難易度も高いしコストかかりすぎかな。。。

ということでURLも含めて見直すということで先送りになった実装部分でしたとさ。動的パラメータを持たせるならはっきりとディレクトリ分けて作成した方が作りやすいと思う。

補足

Nuxt.jsはVue.jsのフレームワーク。より簡単にVue.jsアプリケーションが作成できるが、基本をまずおさえないといけないということで、ルーティング設定・SEO対策・axios非同期通信などを一通りやっている最中。

ルーティングを拡張する実装は、PCとスマートフォンといったデバイス別に画面表示を分ける目的で使われることが多い。
https://ymmooot.dev/articles/3/

P.S.

pending(ペンディング)は保留・先送りという意味でITワールドではよく使われる言葉です。
本記事の先送りにちょっと待った！！という方、ぜひレビューに名乗りをorz

Nuxtのルーティング

やろうとしたこと

補足

P.S.

Discussion