初心者のための Vue.js Vue Router を使用したルーティングの完全ガイド

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 ファイルでの使用方法の例を次に示します。

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- Place to display the matched component -->
  </div>
</template>

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

Home.vue:

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

About.vue:

<template>
  <div>
    <h1>This is the About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

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

npm run serve

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

結論

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

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

以上が初心者のための Vue.js Vue Router を使用したルーティングの完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。