Vue Routerの徹底解説：基本機能から使い方まで完全ガイド

Vue Routerは、Vue.jsアプリケーションにルーティング機能を提供する公式ライブラリです。これにより、シングルページアプリケーション（SPA）のようなユーザーエクスペリエンスを実現することができます。以下に、Vue Routerの主要な機能と使い方について説明します。

基本機能

ルート定義:

• ルートはURLパスとコンポーネントのマッピングを定義します。例えば、/homeにアクセスしたときにHomeComponentを表示する、などです。

動的ルートマッチング:

• URLに変数を含めることができます。例えば、/user/:idのように、:idは任意のユーザーIDを受け取ることができます。

ネストされたルート:

• 親ルートの下に子ルートを定義することで、複雑なビュー階層を作成できます。

プログラムによるナビゲーション:

• JavaScriptからルートを変更するためのAPIを提供します。router.pushやrouter.replaceを使用して、動的にページ遷移を行います。

ナビゲーションガード:

• ルート遷移前に特定の条件をチェックし、遷移を許可するかどうかを制御することができます。例えば、認証が必要なページへのアクセスを制限するなどです。

トランジション効果:

• ページ遷移時にアニメーション効果を追加することができます。

インストールと設定

インストール

まず、Vue Routerをインストールします。

npm install vue-router

基本的なセットアップ

次に、Vue Routerを設定します。router.jsファイルを作成し、ルートを定義します。

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeComponent from './components/HomeComponent.vue';
import AboutComponent from './components/AboutComponent.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
];

const router = new VueRouter({
  routes
});

export default router;

メインアプリケーションに組み込む

作成したrouter.jsをメインのVueインスタンスに組み込みます。

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

使い方の例

ナビゲーションリンク

テンプレート内で<router-link>を使用して、ルート間をナビゲートします。

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

プログラムによるナビゲーション

コンポーネント内でルートを変更する場合、this.$router.pushを使用します。

methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

まとめ

Vue Routerは、Vue.jsアプリケーションに強力で柔軟なルーティング機能を提供します。基本的なルート定義から、動的ルート、ネストされたルート、ナビゲーションガード、トランジション効果まで、多彩な機能を活用することで、ユーザーに優れたナビゲーション体験を提供できます。