Vue.js でのルーティングを理解する

ルーティングは、Web アプリケーション開発において不可欠な機能です。 Vue.js では、Vue Router を使用してページ間のナビゲーションを簡単に管理できます。この投稿では、Vue.js アプリケーションでルーティングを設定する方法を検討します。

Vueルーターとは何ですか?

Vue Router は、Vue.js アプリケーションでルーティングを管理するための公式ライブラリです。 Vue Router を使用すると、ページをリロードせずにスムーズなナビゲーションを可能にするシングルページ アプリケーション (SPA) を作成できます。

Vueルーターのインストール

まず、Vue Router をインストールする必要があります。 Vue CLI を使用している場合は、新しいプロジェクトの作成時に Vue CLI のインストールを選択できます。そうでない場合は、次のコマンドを使用してインストールできます:

npm install vue-router

Vueルーターのセットアップ

インストール後、Vue Router を設定する必要があります。セットアップの基本的な手順は次のとおりです:

• ルーター ファイルを作成する src フォルダー内に router.js という名前の新しいファイルを作成します。 「vue」から Vue をインポートします。 「vue-router」からルーターをインポートします。 './views/Home.vue' からホームをインポートします。 './views/About.vue' から About をインポートします。

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

• ルーターをアプリケーションに統合する 次に、ルーターを Vue インスタンスに統合する必要があります。 main.js ファイルを次のように編集します。

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

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• ルーターリンクの使用 ページ間を移動するには、 コンポーネントを使用します。 App.vue ファイルでの使用方法の例を次に示します。

• 新しいページの作成 次に、使用する 2 つのコンポーネント、Home.vue と About.vue.
を作成しましょう。

Home.vue:

About.vue:

これで、次のコマンドを使用してアプリケーションを実行できるようになります:

npm run serve

ブラウザを開いて http://localhost:8080 にアクセスします。 [ホーム] リンクと [バージョン情報] リンクをクリックして、ルーティングがどのように機能するかを確認してください。

結論

この投稿では、Vue Router を使用した Vue.js でのルーティングの基本について説明しました。このルーティング機能を使用すると、よりインタラクティブでユーザーフレンドリーなアプリケーションを構築できます。次回の投稿では、ルート パラメーターやネストされたルートなど、Vue Router のより高度な機能について詳しく説明します。

この投稿がお役に立てば幸いです。ご質問がございましたら、お気軽にコメントを残してください。