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

はじめに

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

名前付きルート

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

router.js

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

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

example.vue

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

以上を用いてサンプルを作ってみる

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

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を設定していますが、こちらは名前付きルートじゃなくても設定可能です。

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>

Morning.vue

<template>
  <div>おはよう</div>
  <router-view></router-view>
</template>

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>

MorningBreakfast.vue

<template>
  <div>朝ごはんはパンです。</div>
</template>

結果

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

朝食ボタンをクリック

詳細ボタンをクリック

詳細ボタン + クエリ付きをクリック

おわりに

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