Nuxt.jsのroutingで/indexページを作る

たまにはゆるい記事を書こうかなと思ったので、今回はurlで/indexへのroutingをnxut.jsで作ることに関して書こうと思います。

あまりないと思いますがhttp://hogehoge/indexというurlにアクセスできるようにするため、nxut.jsではpageディレクトリに新しくフォルダを作ります。

nuxt.jsではpageディレクトリに新しいフォルダを作ると、router.jsが自動で更新されます。

例えば/topというパスを作るとします。
その場合はpageのディレクトリは

app/pages/
├── top
│   └── index.vue
├── README.md

というディレクトリ構造になります。

routingは以下のような形になります。

router.js

export function createRouter() {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,

    routes: [{
      path: "/top",
      component: _7f4019b2,
      name: "top"
    }],

    fallback: false
  })
}

次に/indexのroutingに関してです。

上記と同じような感じで作ると

app/pages/
├── index
│   └── index.vue
├── README.md

となると思われますが、これだと以下のようにpath: "/"の子要素として作られてしまいます。

router.js

export function createRouter() {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,

    routes: [{
      path: "/",
      component: _5cc8436a,
      children: [{
        path: "",
        component: _3929db26,
        name: "index"
      }]
    }],

    fallback: false
  })
}

なので、対応としてはディレクトリ名の頭文字を大文字に変えることで対応することが可能です。

router.js

export function createRouter() {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,

    routes: [{
      path: "/Index",
      component: _b0046b66,
      name: "Index
    }],

    fallback: false
  })
}

まとめ

あまり/indexというpathを作る機会はほとんどないかと思われますが、何かの参考になれば幸いです。