vueでのルーティングのインストールと使い方を詳しく解説

Vue は、開発を容易にする多くのツールと機能を提供する、人気のあるフロントエンド開発フレームワークです。その中でも、Vue ルーティングは、シングルページ アプリケーションの作成とルーティング機能の実装に役立ちます。この記事では、Vue ルーティングの使用方法を紹介します。

Vue ルーティングのインストール

Vue ルーティングの使用を開始する前に、まず Vue Router をインストールする必要があります。これは npm を通じてインストールできます:

npm install vue-router

Vue ルーターの使用

Vue プロジェクトのエントリ ファイル main.js で、Vue ルーティングを使用するためにいくつかの設定を行う必要があります。

まず、Vue と Vue Router をインポートする必要があります:

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

Vue.use(VueRouter)

次に、ルートを定義する必要があります。これは、別の js ファイルで行うことができます。たとえば、ここでは、routes.js でルートを定義します:

import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

export default [
  {
    path: '/',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

routes.js では、最初に使用する必要があるコンポーネントをインポートし、次にルートを定義します2 つのルーティング オブジェクトの配列が含まれます。各ルート オブジェクトには、パス フィールドとコンポーネント フィールドが含まれています。

次に、main.js で VueRouter インスタンスを作成し、それを Vue インスタンスに渡す必要があります。

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes // 简写
})

new Vue({
  router
}).$mount('#app')

次に、それを Vue コンポーネントのルーティングで使用します。たとえば、<router-link> のルートを使用して、他のルートにリンクできます。

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/bar">Go to Bar</router-link>
  </div>
</template>

ここでは、<router-link> を使用します。タグ ルーティングリンクが作成され、ユーザーがリンクをクリックすると、指定したルートにジャンプできます。 to 属性は、リンクのターゲット ルートを定義します。

さらに、Vue Router が提供するプログラムによるナビゲーション機能を使用してページ ジャンプを実現することもできます:

this.$router.push('/bar')

ジャンプするとき、いくつかのパラメーターを渡すこともできます:

this.$router.push({ name: 'User', params: { userId: 1 }})

ここでは、$router.push メソッドを使用し、オブジェクトをパラメーターとして渡します。ここで、name フィールドはターゲット ルートの名前を指定し、params フィールドはいくつかのパラメーターを渡します。

概要

Vue Router は、Vue フレームワークの非常に重要なコンポーネントの 1 つで、強力なルーティング機能を提供し、よりカラフルなシングルページ アプリケーションの作成に役立ちます。この記事では、Vue ルーティングのインストールと使用方法を説明し、サンプル コードを通じて Vue Router の使用方法をより深く理解していただきます。皆さんが Vue ルーターをより良く使用できるようになれば幸いです。

以上がvueでのルーティングのインストールと使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。