【Nuxt】ルーティング

はじめに

こんにちは！大ちゃんの駆け出し技術ブログです。

前回の記事ではNuxtの自動ルーティングについて少し触れましたが、今回の記事でさらに深掘りしたいと思います。

事前知識

前の記事のおさらいです。Nuxtを使う最大のメリットの一つは自動ルーティングができることです。pagesディレクトリ直下にファイルを作成することで、そのファイルへのルーティングが自動で行われます。

pagesディレクトリ直下にabout.vueを作成します。

<!-- pages/about.vue -->
<template>
  <div>
    <h1>Aboutページ</h1>
  </div>
</template>

これをするだけでhttp://localhost:3000/aboutにアクセスすることで作成したファイルのページが追加されています。

階層ページ

フォルダを作成し、その配下にファイルを作成することで 階層ページを作成できます。

試しにusersディレクトリを作成し、その下にlist.vueを作成します。

<!-- pages/users/list.vue -->
<template>
  <h1>ユーザ一覧ページ</h1>
</template>

その後再コンパイルすると、http://localhost:3000/users/listで作成したファイルのページを表示できます。

コンパイルした後に.nuxt/router.jsのファイルを確認すると、ルーティングが正しく反映されているかを確認することもできます。

// .nuxt/router.js
routes: [{
    path: "/about",
    component: _4757573d,
    name: "about"
  }, {
    path: "/inspire",
    component: _6036b20a,
    name: "inspire"
  }, {
    path: "/users/list",
    component: _39e8efc5,
    name: "users-list"
  }, {
    path: "/",
    component: _670f3202,
    name: "index"
  }],

  fallback: false
}

今回作成したファイルのルーティング指定箇所は以下の部分ですね。

    path: "/users/list",
    component: _39e8efc5,
    name: "users-list"

componentプロパティは「_(アンスコ) + 8桁の英数字」で自動で生成されています。nameプロパティは「フォルダ名 + ファイル名」で自動で生成されています。

このページへのルーティングをnuxt-linkタグを使用して生成します。nameプロパティをそのまま参照すればOKです。

<!-- components/NavBar.vue -->
<template>
  <div>
    <nav>
      <nuxt-link to="/">Home</nuxt-link>
      <nuxt-link to="/about">About</nuxt-link>
      <nuxt-link :to="{ name: 'users-list' }">User List</nuxt-link>
    </nav>
  </div>
</template>

このように簡単にページへの遷移先リンクを作ることができます。

Dynamic Routes(動的ルート)

詳細ページなど、動的にページの内容が変わるページの作成方法もnuxtでは簡単にできます。

id.vueをusersディレクトリの下に作成しましょう。注意点としては、動的に内容が変わるページの**ファイル名の前には必ず(アンダーバー)が必要**であることです。以下を参照してください。

ファイルシステムに基づくルーティング

ファイルの中身が動的に切り替わっているかを確かめるために、this.$route.params.idでパラメータが反映されているかを確認します。

<!-- pages/users/_id.vue -->
<template>
  <h1>ユーザID: {{ this.$route.params.id }}</h1>
</template>

http://localhost:3000/users/1

http://localhost:3000/users/2

動的に変更しているのがわかります。

では実際にデータを入れてみましょう。本来であればaxiosを使ってデータを取得するのですが、今回はデータをファイルの中に直接定義します。

<!-- pages/users/_id.vue -->
<template>
  <div>
    <h1>ユーザID: {{ user.name }}</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <nuxt-link :to="{ name: 'users-id', params: { id: user.id } }">{{
          user.name
        }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        {
          id: 1,
          name: "Aさん"
        },
        {
          id: 2,
          name: "Bさん"
        },
        {
          id: 3,
          name: "Cさん"
        }
      ]
    };
  },
  computed: {
    user() {
      return this.users.find(user => user.id == this.id);
    },
    id() {
      return this.$route.params.id;
    }
  }
};
</script>

nuxt-linkタグを繰り返し処理で生成しています。nuxt-linkタグに動的ルーティングを反映させるためには、nameプロパティの指定に加えて、パラメーターも指定してあげます。

<ul>
  <li v-for="user in users" :key="user.id">
    <nuxt-link :to="{ name: 'users-id', params: { id: user.id } }">{{
      user.name
    }}</nuxt-link>
  </li>
</ul>

これで詳細ページのルーティングができていることが確認できると思います。

prefetch

Nuxt Components

ビューポート内やスクロール時にリンクが表示されていることを検出し、ユーザーがリンクをクリックしたときにすぐに使えるように、それらのページのデータを事前に取得できる機能です。nuxt-linkタグにはデフォルトで使えるようになっています。

あまり使いどころがイメージできていないのですが、遷移する前に何かしらの処理を挟みたいときなどに使えそうですね。

prefetchを停止することもできます。(ただ、停止するメリットはあまりわかりませんでした。)

タグごとに個別に停止

<NuxtLink to="/about" no-prefetch>About page not prefetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not prefetched</NuxtLink>

グローバルに停止

// nuxt.config.js  
router: {
    prefetchLinks: false
  }