Nuxt環境でページ遷移がうまくいかない

【開発環境】

アプリケーションフレームワーク：Nuxt.js2系

JavaScriptフレームワーク：Vue.js2系

Nuxt環境にて以下のような子の階層を持つディレクトリ構成で、ページ遷移を試みたときにURLは正しく表示されているが、子の階層のディレクトリに存在するVueファイルが、画面表示されなくて困りました。

直感では、「https://xxxxxx/test1」も「https://xxxxxx/test1/test2」も画面遷移して表示されるような気がするのですが、「https://xxxxxx/test1/test2」は表示されませんでした。

└── pages/
     ├ test1.vue（親）
     └ test1/
       └ test2.vue（子）

調査の結果、上記ディレクトリ構成はNuxtChildコンポーネントを使用する時にのみ有効なディレクトリ構成で、それ以外のときには子の階層ディレクトリに用意したVueファイルは表示されないことがわかりました。

Nuxt.js開発環境では、ページディレクトリ構成に注意が必要なようです。

どのようなことに注意するべきなのかについて話を進める前に、
NuxtChildについてざっくりと説明しようと思います。

NuxtChildはNuxt.jsの機能の一つで、親Vueファイルを子Vueファイルのレイアウトとして利用できるコンポーネントです。

つまり、１画面に親のVueファイルの内容を表示したまま子のVueファイルの内容を表示させることができます。

＜使用条件＞

pagesディレクトリ配下に親のVueファイルと、 親のVueファイルと同名のディレクトリを用意し、そこに子Vueファイルを保管することでファイル間に親子関係をもたせます。

└── pages/
     ├ test1.vue（親）
     └ test1/
       └ test2.vue（子）

次に、上記のフォルダ構成で親Vueファイルに<NuxtChild />または<nuxt-child />と記述します。

sample.vue

<template>
  <div>
    <h2>TEST1</h2>
    <v-btn color="primary" nuxt to="/test1/test2">
        TEST2を実行
    </v-btn>
    <NuxtChild />
  </div>
</template>

sampleParent.vue

<template>
    <div>
        <h2>TEST2</h2>
        <p>テスト２を実施中</p>
    </div>
</template>

このとき、親Vueファイルから子Vueファイルにページ遷移すると、URL上では「https://xxxxxx/test1」から「https://xxxxxx/test1/test2」に変わるのですが、画面表示としては、１画面で親Vueファイルの内容と子Vueファイルの内容が同時に表示されます。

ここで話を戻しますが、なぜ上記のようなディレクトリ構造でNuxtChildを使用しないと子の階層ディレクトリのVueファイルが表示されなかったのか・・・

それはNuxt環境では、ディレクトリ構成によりrouter.jsファイルにURLパス設定される仕様で、上記のディレクトリ構成だと、他のVueファイルと同階層でURLパスが設定されず、NuxtChildがないと参照されない子のURLパスが設定されるからなんです。

まだよくわからないと思うので、具体的に見ていきましょう。

ここで、一度、ディレクトリ構成をおさらいすると・・・

└── pages/
     ├ test1.vue（親）
     └ test1/
       └ test2.vue（子）

pagesディレクトリ配下にtest1ディレクトリがあり、 そのディレクトリにtest2ファイルを保管しています。

このとき、Nuxt.jsの機能で自動的にroutesプロパティの構成は、test1.vueと同階層でtest2のURLパスは設定されず、 子の階層としてURLパスが設定されます。

sample.ts

//---省略---
  routes: [{
    path: "/test1",
    component: _d657d864,
    name: "test1",
    children: [{
      path: "test2",
      component: _488bf5df,
      name: "test1-test2"
    }]
//---省略---

このようにroutesプロパティでURLパスにchildrenが設定されると、NuxtChildコンポーネントを使用しない場合、子の階層にURLパスが存在することを認識してくれないため、test2.vueのページを表示させることができなくなります。

なので、NuxtChildコンポーネントを使用せず、ディレクトリに子の階層を持たせるときには、必ずindex.vueなどを使用したディレクトリ構成にする必要があります。

└──　pages/
		├index.vue
        └test1/
    		├index.vue
			└test2.vue

こうすることでroutesプロパティの設定にchildrenが設定されず、

全てのURLパスが同じ階層で設定されるため、test2のページが表示されるようになります。

sample.ts

routes: [{
		path: "/test1",
    component: _488bf5df,
    name: "test1-test2"
  }, {
    path: "/test1/test2",
    component: _488bf5df,
    name: "test1-test2"
  }, {
    path: "/",
    component: _a4bf857e,
    name: "index"
  }],

整理すると

Nuxt.js環境下で、NuxtChildを使用せずにNuxtChildのディレクトリ構成でページファイルを作成すると、子の階層のディレクトリに存在するVueファイルを認識してくれないため表示することができません。

子の階層は、あくまでNuxtChildの機能で認識してくれるようになるからです。

また、NuxtChildディレクトリ構成でないときにNuxtChildを使用しても、
router.jsは子の階層のVueファイルとしてパスを設定してくれないため、NuxtChildで１つの画面に２つのページを表示させることはできないのです。

結論

Nuxt環境では、ディレクトリ構成によってrouter.jsファイルにURLパスが設定されるため、
ディレクトリ構成は注意して作成する必要があります。