Vue でナビゲーションを実装する方法

Vue は単一ページ アプリケーションの開発に適した JavaScript フレームワークであるため、重要な部分はナビゲーションです。 Vue では、Vue Router を使用してナビゲーションを実装できます。 Vue でナビゲーションを実装する手順は次のとおりです。

ステップ 1: Vue Router をインストールする

npm または Yarn を使用して、Vue プロジェクトに Vue Router をインストールできます。ターミナルまたはコマンド ラインで、次のコマンドを入力します。

npm install vue-router -save 或
yarn add vue-router

ステップ 2: Vue Router インスタンスを作成する

プロジェクトで、Vue Router インスタンスを作成する必要があります。プロジェクトで main.js ファイルを開き、次のコードを入力します:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

ここで行うことは、Vue と Vue Router をインポートし、Vue Router インスタンスを作成してルートを定義することです。ルーティングは Vue Router インスタンスの属性であり、path 属性はルーティング パスの指定に使用され、name 属性はルート名の指定に使用され、component 属性はホームなどのコンポーネントの指定に使用されることに注意してください。 、についてなど。

ステップ 3: ルーティングの設定

Vue プロジェクトでは、ルーティングを設定する必要があります。 App.vue ファイルを開き、次のコードを追加します。

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

これは、router-link タグを使用してナビゲーション バーにリンクを追加します。パスは to 属性を使用して指定されます。この例では、「/」と「/about」へのリンクがあります。さらに、ルータービューコンポーネントを使用して、選択したルーティングコンポーネントをロードします。

ステップ 4: ルーティングを使用する

Vue Router インスタンスを作成し、ルーティングとリンクを設定したので、コンポーネントでルーティングを使用できます。 Home.vue ファイルを開いて次のコードを追加します:

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to my home page!</p>
  </div>
</template>

About.vue を開いて次のコードを追加します:

<template>
  <div>
    <h1>About Page</h1>
    <p>Welcome to my about page!</p>
  </div>
</template>

次に main.js を開いて次のコードを追加します:

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

ルーター インスタンスを Vue インスタンスに挿入し、$mount() メソッドを使用して Vue インスタンスをアプリケーションの app 要素に # マウントしていることに注意してください。

ここで、Vue アプリケーションを再起動し、ブラウザーで「/」パスと「/about」パスに移動すると、ホーム ページとバージョン情報ページが表示されます。

この記事では、Vue アプリケーションにナビゲーションを実装する方法を学習しました。この手順には、Vue Router のインストール、Vue Router インスタンスの作成、ルーティングの設定、およびルーティングの使用が含まれます。 Vue アプリケーションにナビゲーションを追加して、ユーザーがアプリケーションを簡単に移動して必要なページにアクセスできるようにできるようになりました。

以上がVue でナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。