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/