【Vue + Nuxt.js】Nuxt.jsのルーティングの基本

2021.7.14(Wed)

Nuxt.jsでのルーティング

通常のVue.jsでは以前の記事でもご紹介した通り、vue-routerを導入して、ルーティング設定をしなければなりませんでした。

ですが、Nuxt.jsでは自動的にルーティングの設定を行なってくれます。

例えば、下記のように3ページ分のページコンポーネントを「pages」フォルダ内に作成したとします。

この場合、以下のようなルーティング設定が自動で生成されます。

routes: [
  {
    path: '/',
    component: index
  },
  {
    path: '/detail',
    component: detail
  },
  {
    path: '/contact',
    component: contact
  }
]

通常のVue.jsであれば、routerフォルダ内のindex.jsに記述する上記内容が自動生成されるので非常に便利です。

ページへのリンクは下記で設置します。

componentsフォルダ内にHeader.vueを作成して、下記のように記述しましょう。

<template>
  <header>
    <div class="header_container">
      <div class="menu">
        <nuxt-link to="/">Top</nuxt-link>
        <nuxt-link to="/detail">Detail</nuxt-link>
        <nuxt-link to="/contact">Contact</nuxt-link>
      </div>
    </div>
  </header>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({});
</script>

<style scoped>
header {
  height: 60px;
}
.header_container {
  display: table;
  width: 100%;
  height: 100%;
  padding: 0 5%;
  text-align: right;
}
.menu {
  display: table-cell;
  vertical-align: middle;
}
.menu a {
  margin-left: 15px;
  text-decoration: none;
  color: #222;
}
.menu a:hover {
  text-decoration: underline;
}
.menu a:first-child {
  margin-left: 0;
}
</style>

このようにリンクを記載するときは下記のように

<nuxt-link to="/コンポーネント名">テキスト</nuxt-link>

と記述してください。

これでページを確認すると、下記のようにヘッダーにリンクがつきました。

クリックすると問題なく遷移ができました。

動的ルーティング

以前の記事で、vue-routerにおいてパラメーターをURLに設定したり、取得したりする方法を紹介しました。

【Vue + vue-cli】vue-routerでパラメーターを設定、取得
https://www.dailyupblog.com/web_development/834/

Nuxt.jsにおいて、このようにURLにクエリパラメーターをつけて動的に遷移する方法をご紹介します。

クエリパラメーターを設定する方法として、「pages」フォルダ内にまずページ名のディレクトリを作成します。

その中にファイル名にアンダーバー（_）を先頭につけたファイルを作成します。

今回は、pagesディレクトリ内に「detail」ディレクトリを作成してください。

その中に_id.vueファイルを作成してください。

ファイル内には下記のように記述してください。

<template>
  <div class="container">
    <div>
      <h2>Detail</h2>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({});
</script>

<style scoped>
</style>

先ほど作成したdetail.vueは削除してください。

このようなディレクトリ構成にすると下記のようなルーティング設定が自動設定されます。

routes: [
  {
    path: '/',
    component: index
  },
  {
    path: '/detail/:id',
    component: detail
  },
  {
    path: '/contact',
    component: contact
  }
]

その後、Header.vue内に記述したリンクを下記のように記述します。

//省略...
<div class="menu">
  <nuxt-link to="/">Top</nuxt-link>
  <nuxt-link to="/detail/1">Detail</nuxt-link>
  <nuxt-link to="/contact">Contact</nuxt-link>
</div>
//省略...

こうすることで、遷移した際に「1」というクエリパラメーターがついたURLでページ遷移します。

これがNuxt.jsにおける動的ルーティングです。

プログラムによるナビゲーション

前述した通り、

<nuxt-link to=”/コンポーネント名”>テキスト</nuxt-link>

でナビゲーションを記述することはできるのですが、ルーターのインスタンスメソッドを使ったプログラムによる方法でも可能です。

プログラムで記述した方が、アンカータグで記述するよりも運用しやすいなどのメリットがあります。

具体的なやり方は以下のようになります。

今回は、より運用しやすくするために、パスを全て定数化して管理してみます。

「pages」フォルダと同階層に「constants」フォルダを作成してください。

この「constants」フォルダは定数ファイルを格納する際に使われます。

このフォルダ内にindex.tsとPath.tsファイルを作成してください。

export * from "./Path";

export enum Path {
  HOME = "/",
  DETAIL = "/detail",
  CONTACT = "/contact"
}

上記で、「enum」というものを使用していますが、列挙型ともいい、定数をひとまとめにすることができる代物です。

これでパスの定数化が完了しました。

続いて、Header. vueを開いてください。

下記のように記述してください。

<template>
  <header>
    <div class="header_container">
      <div class="menu">
        <ul>
          <li @click="changePage(Path.HOME)">Home</li>
          <li @click="changePage(Path.DETAIL)">Detail</li>
          <li @click="changePage(Path.CONTACT)">Contact</li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script lang="ts">
import Vue from "vue";
import { Path } from "~/constants";
export default Vue.extend({
  data() {
    return {
      Path: Path
    };
  },
  methods: {
    changePage(path: string) {
      this.$router.push({ path });
    }
  }
});
</script>

<style scoped>
header {
  height: 60px;
}
.header_container {
  display: table;
  width: 100%;
  height: 100%;
  padding: 0 5%;
  text-align: right;
}
.menu {
  display: table-cell;
  vertical-align: middle;
}
.menu ul li {
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  cursor: pointer;
}
.menu ul li:first-child {
  margin-left: 0;
}
.menu ul li:hover {
  text-decoration: underline;
}
</style>

下記のように、先ほど追加した定数ファイルをインポートしましょう。

import { Path } from "~/constants";

そして、下記メソッドを追加しました。

  methods: {
    changePage(path: string) {
      this.$router.push({ path });
    }
  }

Vue.jsにおいて、アンカーリンクではなく、プログラムによってナビゲーションする場合にはこのように「$router.push(コンポーネント名)」でリンクできます。

ですので、このように引数で受け取ったページへ遷移するナビゲーション用のメソッドを作りました。

そして、あとは@clickを使い、クリックイベントでこのメソッドを発火してあげるだけです。

<li @click="changePage(Path.HOME)">Home</li>
<li @click="changePage(Path.DETAIL)">Detail</li>
<li @click="changePage(Path.CONTACT)">Contact</li>

こうすれば、アンカーリンクよりも管理しやすいように思われます。

ちなみに、上記のようなプログラムによるナビゲーションでクエリパラメーターをつけるような動的ルーティングを実装する場合は、先ほどと同じように、アンダーバー（_）付きのファイル作成するディレクトリ構成にして、ナビゲーションを設定する際は単純に引数でパスを渡す際に「/パラメータ値」を付ければいいだけです。

下記のようにします。

<li @click="changePage(Path.HOME)">Home</li>
<li @click="changePage(`${Path.DETAIL}/1`)">Detail</li>
<li @click="changePage(Path.CONTACT)">Contact</li>

上記だと、detailページ遷移のリンクのクリックイベントのところで、引数に「`${Path.DETAIL}/1`」を入れています。

こうすることで、クエリパラメーター付きのURLで遷移させることができます。