【学習記録⑲】名前付きルートを用いてページ遷移を行う。

# はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
[前回の記事](https://qiita.com/Ooooooomin_365/items/1d1ac361df543af7c87a)にて`$router`を用いてページ遷移を行う方法について記載しましたが、今回はその中でも以前`path`ルートで遷移したのに対して`name`ルートを用いてページ遷移を行っていこうと思います。

## 名前付きルート
`path`ルートが直接URLを書くものだったのに対し、`名前付きルート`はルート設定ファイルにて対象のルートへ名前を付けた後、その値を用いることで同様の機能を作成できます。
以下のように`router.js`でルート設定を行っている部分で名前を付けた後...

```js:router.js
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/Morning/:details',
            name: 'morning-details'
            component: Morning
        },
    ]
});
```

以下のように遷移先を上記で付けた`name`の値にすることで指定した遷移先へ移ることができるようになります。

```vue:example.vue
<router-link to="{ name: 'morning-details' }">
  example
</router-link>
```

https://next.router.vuejs.org/guide/essentials/named-routes.html#named-routes

## 以上を用いてサンプルを作ってみる
以上の内容を用いてサンプルコードを作成してみます。
今回は「朝食ボタン」「詳細ボタン」「詳細ボタン + クエリ付き」をクリックするとそれぞれのページに遷移するという内容にします。

```js:router.js
import Morning from './views/Morning.vue';
import MorningDetails from './views/MorningDetails.vue';
import MorningBreakfast from './views/MorningBreakfast.vue';
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/Morning',
            component: Morning,
            children: [
                {
                    path: 'details',
                    component: MorningDetails,
                    name: 'morning-details'
                },
                {
                    path: 'breakfast',
                    component: MorningBreakfast,
                    name: 'morning-breakfast'
                }
            ]
        },
    ]
});

export default router;
```

以下の`toDetailsWithQuery()`メソッドにて`query`を設定していますが、こちらは名前付きルートじゃなくても設定可能です。

```vue:App.vue
<template>
  <button @click="toBreakfast">朝食ボタン</button>
  <button @click="toDetails">詳細ボタン</button>
  <button @click="toDetailsWithQuery">詳細ボタン + クエリ付き</button>
  <router-view></router-view>
</template>

<script>
export default {
  methods: {
    toBreakfast() {
      this.$router.push({ name: "morning-breakfast" });
    },
    toDetails() {
      this.$router.push({ name: "morning-details" });
    },
    toDetailsWithQuery() {
      this.$router.push({ name: "morning-details", query: { content: 1 }});
    },
  },
};
</script>
```

```vue:Morning.vue
<template>
  <div>おはよう</div>
  <router-view></router-view>
</template>
```

```vue:MorningDetails.vue
<template>
  <div>だんだん冷えてきたので体調には気を付けていきましょう。</div>
  <div v-if="content !== undefinded">クエリの値は{{ content }}です。</div>
</template>

<script>
export default {
  data() {
    return {
      content: this.$route.query.content,
    };
  },
  watch: {
    $route() {
      this.content = this.$route.query.content;
    },
  },
};
</script>

```

```vue:MorningBreakfast.vue
<template>
  <div>朝ごはんはパンです。</div>
</template>
```

## 結果
それぞれの遷移先で以下のように正常に画面へ文字が出力されていることが分かります。

**朝食ボタンをクリック**
![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/cf842784-517e-7bcc-7da4-7c5fa5206308.png)
**詳細ボタンをクリック**
![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/643e91ea-4171-7dfd-5ccf-d49794a4ca67.png)
**詳細ボタン + クエリ付きをクリック**
![pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/f9ecb33b-4500-eef0-9a0b-e6fd51b0373e.png)

# おわりに
今回は名前付きルートを用いてページ遷移を行ってみました。
こちらの方が直接パスを毎度書かずに済みそうなので、個人的にはこちらを今後使っていこうかなと思います！