MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Vue
  4. [Vue] Vue Router について知ろう

[Vue] Vue Router について知ろう

Vue

Vue Routerは、Vue.jsアプリケーションでページ間の遷移を管理するためのオフィシャルなルーティングライブラリです。Vue.js 3では、Vue Routerのバージョン4が利用可能です。ここでは、Vue Routerの使い方について詳しく説明します。

目次

インストール

Vue Routerをインストールするには、まずVue CLIを利用して新しいVue.jsプロジェクトを作成します。Vue CLIがインストールされていない場合は、npmを使って以下のようにインストールできます。

npm install -g @vue/cli

Vue CLIがインストールされたら、以下のコマンドを実行して新しいVue.jsプロジェクトを作成します。

vue create my-project

プロジェクトが作成されたら、以下のコマンドを実行してVue Routerをインストールします。

npm install vue-router@4

基本的な使い方

Vue Routerを使うには、ルーターを作成し、Vueアプリケーションにマウントする必要があります。ルーターを作成するには、createRouter()関数を使用します。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

上記の例では、createRouter()関数を使ってルーターを作成しています。createWebHistory()関数を使って、HTML5のhistoryモードを有効にしています。routesオプションには、各ルートに対応するコンポーネントを指定します。

ルーターを作成したら、Vueアプリケーションにマウントする必要があります。Vue.js 3では、createApp()関数を使ってVueアプリケーションを作成します。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(router)

app.mount('#app')

上記の例では、createApp()関数を使ってVueアプリケーションを作成し、use()メソッドを使ってルーターを追加しています。最後に、mount()メソッドを使ってVueアプリケーションをマウントしています。

ルート定義

ルート定義は、routesオプションで指定します。各ルートは、pathプロパティとcomponentプロパティを持ちます。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

ルートの表示

ルーターを使って、コンポーネントを表示するには、ルートを定義する必要があります。ルートを定義するには、<router-view>コンポーネントを使用します。

<template>
  <div>
    <h1>Vue Router Example</h1>
    <router-view></router-view>
  </div>
</template>

上記の例では、<router-view>コンポーネントを使用して、現在のルートに対応するコンポーネントを表示しています。

ルートパラメーター

ルートパラメーターを使用すると、動的なルートを作成できます。たとえば、以下のようなURLを扱うことができます。

/profile/123

123は、ユーザーのIDを表します。このようなURLを扱うには、ルートパラメーターを使用して、動的なルートを作成します。

const routes = [
  { path: '/profile/:id', component: Profile }
]

上記の例では、:idはパラメーターであり、Profileコンポーネントを表示します。Profileコンポーネントで、$route.params.idを使って、idパラメーターの値を取得できます。

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

Vue Routerを使って、プログラムによるナビゲーションを行うには、$routerオブジェクトを使用します。

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

上記の例では、goToAboutPage()メソッドを使って、$router.push()メソッドを呼び出して、/aboutページに遷移しています。

終わりに

Vue Routerは、Vue.jsアプリケーションでページ間の遷移を管理するための非常に便利なライブラリです。この記事では、Vue Routerの基本的な使い方を学びました。Vue.js 3では、Vue Routerのバージョン4が利用可能であり、Composition APIを使ったルーターの実装もサポートされています。これらの機能を使って、より高度なVue.jsアプリケーションを作成できます。

Vue
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次