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

#静的ルーティング

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

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

```vuejs:pages/index.vue
<template>
  <div>
    <h1>/index</h1>
  </div>
</template>

```

![スクリーンショット 2020-11-20 11.18.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/c89bbdac-8814-a56d-a724-2721efe3a4e9.png)
***

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

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



```vuejs:pages/test.vue
<template>
  <div>
    <h1>/test</h1>
  </div>
</template>
```

![スクリーンショット 2020-11-20 11.25.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/8f2c69b5-65df-5006-5928-5f7a71fcdf5c.png)
***

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

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

```vuejs:pages/users/index.vue
<template>
  <div>
    <h1>/test</h1>
  </div>
</template>
```

![スクリーンショット 2020-11-20 11.46.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d8e71c25-41c0-7319-d9c0-9043b64fa0fb.png)

#動的ルーティング



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

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

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

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

```vuejs:pages/users/_id.vue
<template>
  <div>
    <h1>/users/_id.vue</h1>
  </div>
</template>
```

![スクリーンショット 2020-11-20 12.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/f7ad1a12-3ef5-10d1-8ea0-a6abacd664f9.png)
***

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

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

```vuejs:pages/users/_id.vue
<template>
  <div>
    <h1>{{$route.params.id}}</h1>
  </div>
</template>
```
![スクリーンショット 2020-11-20 12.47.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/24d19bcc-b3ab-93b6-2e5b-c67e51863139.png)
***

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

# NuxtLink

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

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

`<NuxtLink></NuxtLink>`

```vuejs: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>
```
![demo](https://gyazo.com/22ea65070a2c0607ff449bcc86692ad1/raw)
***

# router.push

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

```vuejs: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>
```

![demo](https://gyazo.com/982b0e04af606c89ebab364e0556948e/raw)
***

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

![demo](https://gyazo.com/cd8c6d0550f0385c79dfe5b3c37ea5a0/raw) 

```vuejs: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>
```


***

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