Nuxt.jsでルーティング

ルーティング

Nuxt.jsはpagesディレクトリ配下にフォルダ作ってそこにindex.vue設置して上げると自動的にルーティングしてくれます。
便利便利。

ディレクトリ作成→中にindex.vue配置

こんなかんじで、プロジェクト生成時、デフォルトで生成される[PROJECT]/.nuxt/pages配下にnewPageをディレクトリを作成します。（.nuxtは隠しフォルダなので注意）
index.vueを作成します。

./newPage/index.vue

<template>
    <h1>
      NewPage
    </h1>
</template>

newPageに作ったindexの中身です。とりあえずタイトルだけ表示させやす。

動作確認

$ npm run dev
run dev で確認して見ます。
↓

できましたね。

補足

ルーティングの設定は、[PROJECT]/.nuxt/router.jsのrouterOptionsにオブジェクトとして格納されいます。この中身もいつか詳しくやりたい。

router.jsのrouterOptions抜粋

export const routerOptions = {
  mode: 'history',
  base: '/',
  linkActiveClass: 'nuxt-link-active',
  linkExactActiveClass: 'nuxt-link-exact-active',
  scrollBehavior,

  routes: [{
    path: "/newPage",
    component: _f8688520,
    name: "newPage"
  }, {
    path: "/",
    component: _971975a0,
    name: "index"
  }],

  fallback: false
}