vueルーターのインストールチュートリアル

Vue は人気のあるフロントエンド開発フレームワークであり、Vue Router は Vue アプリケーションでルーティングを管理するために使用される Vue の一部です。 Vue Router を使用すると、ブラウザーの URL とアプリケーションに表示されるコンテンツを制御できます。 Vue アプリケーションに豊富なインタラクティブなエクスペリエンスとページ ナビゲーション機能を提供します。この記事では、Vue Routerのインストール方法と使い方を解説します。

1. Vue プロジェクトの作成

まず、Vue CLI をインストールし、新しい Vue プロジェクトを作成する必要があります。コマンド ラインで次のコマンドを入力します。

npm install -g @vue/cli
vue create my-project

上記のコマンドは、Vue CLI をインストールし、それを使用して「my-project」という名前の Vue プロジェクトを作成します。新しいプロジェクトに移動し、コマンド ラインで次のコマンドを入力してアプリケーションを開始します。

cd my-project
npm run serve

2. Vue Router のインストール

次に、Vue Router をインストールする必要があります。コマンド ラインで次のコマンドを入力して、Vue Router をインストールします。

npm install vue-router --save

上記のコマンドは、npm 経由で Vue Router をインストールし、プロジェクトの依存関係に追加します。

3. ルートの作成

次に、いくつかのルーティングとビュー コンポーネントを作成します。 SRC ディレクトリに「router.js」という名前のファイルを作成します。このファイルで、新しい Vue Router インスタンスを作成し、エクスポートします。簡単な例を次に示します。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

上記のコードは、「Home」という名前のコンポーネントを指す「home」という名前のルートを作成します。 Vue Router を使用するには、アプリケーションのエントリ ポイントにルートをインポートする必要があります。 「main.js」ファイルを開き、次のコードを追加します。

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

Vue.config.productionTip = false

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

上記のコードは、「router.js」ファイルをインポートし、ルート Vue インスタンスに含めることでルーティングを有効にします。

4. ビュー コンポーネントの作成

次に、さまざまなルートを表示するためにいくつかのビュー コンポーネントを作成する必要があります。 「src/views」フォルダーに「Home.vue」というファイルを作成します。このファイルに、次のコードを追加します。

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

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

上記のコードは、タイトルのみを持ち、インタラクションやナビゲーションを持たない単純な「ホーム」コンポーネントを定義します。さらにコンポーネントを追加し、それらに対して異なるルートを作成できます。

5. ナビゲーションの追加

ユーザーがさまざまなルートやコンポーネントに移動できるようにするには、アプリケーションにいくつかのナビゲーション要素を追加する必要があります。次のコードを「App.vue」ファイルに追加します。

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

上記のコードは、2 つのリンク要素を追加します。1 つは「Home」ルートを指し、もう 1 つは「About」ルートを指します。また、現在の URL に基づいてさまざまなコンポーネントを表示する <router-view> 要素も含まれています。

6. アプリケーションの実行

これで、アプリケーションを実行して、ルーティングが適切に機能しているかどうかを確認できます。コマンド ラインに次のコマンドを入力します。

npm run serve

これにより、ブラウザでアプリケーションが起動します。ナビゲーション要素を使用して、さまざまなルートやコンポーネントに移動し、URL が現在のナビゲーション状態をどのように反映しているかを確認できます。

結論

Vue Router は、複雑なナビゲーションを備えたインタラクティブな Vue アプリケーションの構築に役立つ非常に便利なツールです。 Vue Router を使用するには、アプリケーションにコンポーネントを追加し、ルーティングとナビゲーションを設定する必要があります。この記事がお役に立てば幸いです。Vue の開発が成功することを祈っています。

以上がvueルーターのインストールチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。