Nuxt.js

【Nuxt.jsに入門してみた】ルーティングについて

2020/02/08

Nuxt.jsのルーティング

Nuxt.jsでは、ルーティングの定義ファイルを用意しなくても、 「pages」ディレクトリの構造を見て、ルーティングを自動で設定してくれます。

例えば「pages」ディレクトリに、以下のようにファイルを設置した場合

├ pages
│  ├ users
│  │  ├ index.vue
│  │  └ show.vue
│  └ about.vue

それぞれ、以下のようにルーティングされます。

https://設置先URL/users →pages/users/index.vue

https://設置先URL/users/show →pages/users/show.vue

https://設置先URL/about →pages/users/about.vue

パラメータの受け渡し

「pages」ディレクトリ配下で、ファイル名を「_パラメータ名.vue」にすると、そのパラメータ名で値を受け取ることができます。

├ pages
│  ├ users
│  │  └ _id.vue
│  ├ items
│  │  └ _id (このようにディレクトリ名にしてもOK)
│  │    ├ index.vue
│  │    ├ show.vue

それぞれ、以下のようにルーティングされます。

https://設置先URL/users/1 →pages/users/_id.vue

https://設置先URL/items/1 →pages/items/_id/index.vue

https://設置先URL/items/1/show →pages/items/_id/show.vue

上記のように渡したパラメータにテンプレートからアクセスするには、 以下のように記述すればOKです。

<template>
  <div>
    パラメータ:{{ $route.params.id }}
  </div>
</template>

https://設置先URL/users/1」というURLでアクセスしているなら、 「$route.params.id」には、「1」が入っていることになります。

パラメータ名について

念のためですが、 パラメータ名は何でも大丈夫です。

├ pages
│  ├ posts
│  │  └ _postid
│  │    ├ index.vue

上記のようなディレクトリ構成にしたなら、

<template>
  <div>
    パラメータ:{{ $route.params.postid }}
  </div>
</template>

このようにパラメータ名指定して、参照できます。

リンクの生成(URL遷移)について

テンプレート内で、<nuxt-link>を使うことでリンクを生成できます。

<template>
  <div>
    <nuxt-link to=“/test”>test</nuxt-link>
  </div>
</template>

<router-link>と似ています)

なお、アクティブ中のリンクには 自動的に「.nuxt-link-active」が付与されます。

もちろん、プログラムでの遷移も可能です。

export default {
  methods: {
    movePage() {
      this.$router.push('/test')
    }
  }
}

Nuxtにおけるルーティングのポイント

Nuxt.jsは自動的にルーティングを設定してくれますが、あくまで裏側で「vue-router」を使っているだけです。 なので、vue-routerでできることは、基本できると考えておけば良いです。

疑問が出てきた際には、vue-routerのドキュメントもチェックしてみましょう。

Vue Router