nuxt.jsページ遷移機能を作成しよう！

vueを使ってウェブページを作っていた時の話です。

結論

フォルダ構造を見直しました。

環境

nuxt.js+vue.js

つまずいていたこと

nuxtやvueをインストールしたときのapp.vueをベースにトップページを作成していたのですが、そこからページ遷移機能が付きませんでした。

原因

フォルダ構造の理解ができていませんでした。

あるべきフォルダ構造

Nuxt.js では、pages ディレクトリにあるファイルが自動的にアプリケーションのルートとしてマッピングされるそうです。

pages/
├── index.vue/
└── other.vue/

• pages/index.vue: これはルート / に対応します。index.vue が存在すると、自動的にトップページとして認識されます。
• pages/other.vue: これはルート /other に対応します。ファイル名とパスがそのままルートになります。

今回やってしまっていたこと

├──pages/
|   └── other.vue
└── app.vue ←これをホームとして作成していた

• app.vue: Nuxt.js のプロジェクト全体をラップするルートコンポーネントです。通常、レイアウトやグローバルな設定をここに配置します。ルート自体の設定には関与しません。

ということなのでapp.vueは正しく使いましょう