Vue.jsのナビゲーター - Vue Router を使いこなそう

こんにちは、Vue.jsファンの皆さん！株式会社アシストエンジニアリング、エンジニアのsawasatoです！前回はPiniaについてお話ししましたが、今日は Vue.js アプリに必要不可欠な道案内人、Vue Routerについてお話ししましょう。Vue Routerは、アプリにページ遷移の魔法をかけてくれるもの。これがないと、Vue アプリが一枚の永遠のキャンバスみたいになってしまいますよね。ページ遷移を魔法のように実装してくれる Vue Routerの秘密を、ちょっとユーモアを交えながら探っていきます。

Vue Routerって何者？

簡単に言うと、Vue RouterはVue.jsアプリケーションにルーティング機能を提供する公式ライブラリです。これにより、URLに基づいて異なるコンポーネントを表示したり、クライアントサイドのシングルページアプリケーション（SPA）を構築できるようになります。つまり、あなたのアプリをシームレスに複数ページに見せてくれるナビゲーションガイドです。

Vue Routerのインストール

Vue Routerを使うためには、まずインストールが必要です。まだインストールしていない？大丈夫、たった一行です：
bash

npm install vue-router

そして、main.jsファイルにVue Routerをインポートして、アプリにセットアップします。
javascript

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
const app = createApp(App);
app.use(router);
app.mount('#app');

このシンプルなコードで、アプリの道筋が決まりました。まるで地図が完成したようなものですね！
##コンポーネント間の移動
Vue Routerの基本的な使い方は簡単です。ルートリンクを作るには、を使います。
php

<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</template>

は、ナビゲーションのための Vueコンポーネントです。「普通のaタグじゃダメなの？」と疑問に思うかもしれませんが、Vue Routerはを通じてページのリロードなしに URLを変更し、SPAの滑らかな動作を維持してくれるのです。まるでマジックですよね！
は、指定されたルートに基づいて適切なコンポーネントを表示します。これが Vue Router の舞台装置のような役割を果たし、あなたのアプリがページのように見える魔法をかけてくれます。

動的ルーティング

「プロフィールページはどうすればいいの？」って思っているそこのあなた、Vue Router の動的ルートパラメータを試してみましょう。例えば、/user/:idのようなルートを定義すると、特定のユーザーに基づいてページを表示できます。
arduino

const routes = [
{ path: '/user/:id', component: User },
];

Userコンポーネント内で、このidにアクセスするのも簡単です。
php

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = route.params.id;
console.log('ユーザーID:', userId);
</script>

動的な URLパラメータを使って、ユーザー情報や詳細ページを簡単に構築できます。

ガード機能でナビをカスタマイズ

「ページにアクセス制限をかけたい」という場合も、Vue Router はばっちりサポートしています。beforeEnter ガードやグローバルナビゲーションガードで、ルートへのアクセスを制御することができます。
vbnet

const routes = [
{
path: '/protected',
component: Protected,
beforeEnter: (to, from, next) => {
if (isAuthenticated()) {
next();
} else {
next('/');
}
},
},
];

このbeforeEnter関数はルートに入る前に呼び出され、条件に基づいて次のページに進むかどうかを決めます。これで、ページガードマンがいつでもスタンバイ状態です笑
Vue Routerは、Vue.js を使った開発で不可欠なパートナーです。簡単なセットアップから、動的ルーティング、ナビゲーションガードまで、アプリをより使いやすく、柔軟にしてくれます。Vue.jsの旅をするなら、この道案内人と一緒に素晴らしい開発の旅を始めてみませんか？
ぜひVue Routerと一緒に、素敵なアプリを作ってみてくださいね！

採用拡大中！

アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！

少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！

お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/