Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Vue + Nuxt.js】Nuxt.jsのルーティングの基本

Web開発

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

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

目次

  1. Nuxt.jsでのルーティング
  2. 動的ルーティング
  3. プログラムによるナビゲーション
  4. まとめ

今回はNuxt.jsにおけるルーティングの基本について触れていきたいと思います。

通常のVue.jsだとvue-routerをインストールして、逐一ルーティングの設定をしなければならなかったのですが、Nuxt.jsではもっと簡単にルーティングを制御することができます。

ちなみに通常のVue.jsにおけるルーティングについては下記記事で取り扱っていますので、そちらもご参照ください。

【Vue + vue-cli】vue-routerの基本的な使い方
https://www.dailyupblog.com/web_development/754/

それではいきましょう。

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で遷移させることができます。

まとめ

いかがだったでしょうか。

今回はNuxt.jsにおけるルーティングについてまとめました。

Nuxt.jsでは通常のVue.jsに比べて、ルーティングの設定など特になく、とても簡単です。

パスを定数化して、プログラムによってナビゲーションを設定するととても楽ですので、非常におすすめです。

それでは今回はここまで！

お疲れ様でした！

Nuxt.jsにおけるルーティングに関して、下記公式の解説です。

ルーティング
https://ja.nuxtjs.org/docs/2.x/get-started/routing

ファイルシステムに基づくルーティング
https://ja.nuxtjs.org/docs/2.x/features/file-system-routing

プログラムによるナビゲーション
https://router.vuejs.org/ja/guide/essentials/navigation.html

関連記事

関連記事