Nuxt.jsのルーティングの仕組み

Nuxt.jsはVue.jsのフレームワークで、Vue.jsでも使用されることが多々あるVue Routerを用いてルーティング処理を行っています。

nuxtの開発環境が構築されているフォルダにある、「.nuxt」ディレクトリのrouter.jsに設定が記述されています。routerOptionsの中に以下のような記述があると思います。

routes: [{
    path: "/",
    component: _2c9cd992,
    name: "index"
  }],

デフォルトだと上記のような記述ですが、pagesディレクトリにvueファイルを作成していくと自動的にルート設定が追加されていきます。

pagesディレクトリにtestフォルダを作成し、その配下にtest.vueファイルを作成したとします。その結果router.jsのroutesが配列構造で、以下のように自動的に変更されているのがわかるかと思います。

routes: [{
    path: "/users",
    component: _8ec1776a,
    name: "users"
  }, {
    path: "/test/test",
    component: _16ed622f,
    name: "test-test"
  }]

また、router.js上部に定義文も記載してあることを確認しましょう。今回の場合は以下のような記述になっています。

const _16ed622f = () => interopDefault(import('../pages/test/test.vue' /* webpackChunkName: "pages/test/test" */))

作成したvueファイルを削除したい場合は、このconstで定義されたものと、routes配列内の該当の箇所の２箇所を削除してあげないとビルドに失敗しますのでご注意ください。

Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。