【Nuxt.js】ルーティングとページ遷移について【まとめ】

静的ルーティング

Nuxt.jsではpagesディレクトリにファイルを作成することで自動的にルートの設定をしてくれます。

デフォルトではpages/index.vueが存在しており、
http://localhost:3000/のURLにアクセスすることでそのページを確認できます。

pages/index.vue

<template>
  <div>
    <h1>/index</h1>
  </div>
</template>

---

ではpages/test.vueを作ってみます。

この場合URLはhttp://localhost:3000/testとなります。

pages/test.vue

<template>
  <div>
    <h1>/test</h1>
  </div>
</template>

---

次にpages/users/index.vueを作って見てみます。
URLはhttp://localhost:3000/usersとなります。

このようなディレクトリの階層構造になっていても自動的にルートが設定されています。

pages/users/index.vue

<template>
  <div>
    <h1>/test</h1>
  </div>
</template>

動的ルーティング

_id.vueという名前のファイルを作成することで動的ルーティングが設定できます。

pages/users/_id.vueを作成します。

URL：http://localhost:3000/users/********（任意のID）

********には何を入力しても大丈夫です。
適当に入れましょう。

pages/users/_id.vue

<template>
  <div>
    <h1>/users/_id.vue</h1>
  </div>
</template>

---

では********の部分を取得したいと思います。

$route.params.idで********の部分を取得できます。

pages/users/_id.vue

<template>
  <div>
    <h1>{{$route.params.id}}</h1>
  </div>
</template>

---

続いてリンクを貼ってページ間を遷移させていきます。

NuxtLink

全てのページにリンクを設けたいのでlayouts/default.vueにナビゲーションメニューを作ります。

ページ間の遷移を行うにはNuxt.jsで用意されているNuxtLinkコンポーネントを使います。

<NuxtLink></NuxtLink>

layouts/default.vue

<template>
  <div>
    <hr>
    <NuxtLink to='/'>/index</NuxtLink>
    <NuxtLink to='/users'>/users/index</NuxtLink>
    <NuxtLink to='/users/適当'>users/:id</NuxtLink>
    <hr>
    <Nuxt/>
  </div>
</template>

---

router.push

ボタンを押したときなどにページを遷移させたい場合はrouter.pushが使えます。

layouts/default.vue

<template>
  <div>
    <hr>
    <NuxtLink to='/'>/index</NuxtLink>
    <NuxtLink to='/users'>/users/index</NuxtLink>
    <NuxtLink to='/users/適当'>users/:id</NuxtLink>
    <br>
    <button @click="$router.push('/')">/index</button>
    <button @click="$router.push('/users')">/users/index</button>
    <button @click="$router.push('/users/適当')">users/:id</button>
    <hr>
    <Nuxt/>
  </div>
</template>

---

おまけ　ページ上でIDを指定して遷移させるアプリ

layouts/default.vue

<template>
  <div>
    <hr>
    <NuxtLink to='/'>/index</NuxtLink>
    <NuxtLink to='/users'>/users/index</NuxtLink>
    <NuxtLink to='/users/適当'>users/:id</NuxtLink>
    <br>
    <button @click="$router.push('/')">/index</button>
    <button @click="$router.push('/users')">/users/index</button>
    <button @click="$router.push('/users/適当')">users/:id</button>
    <br>
    /users/<input type="text" v-model="id"><button @click="goTo">遷移</button>
    <hr>
    <Nuxt/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: ''
    }
  },
  methods: {
    goTo() {
      this.$router.push(`/users/${this.id}`);
      this.id = '';
    }
  }
}
</script>

---

以上です。
ここまで見て頂きありがとうございました！