Vue-Router: Vue アプリケーションでルート パラメーターを使用するにはどうすればよいですか?

Vue-Router は、Vue アプリケーションでルーティングを管理するための Vue.js エコシステムの強力なコンポーネントです。 Vue アプリケーションでは、ルート パラメーターを使用すると、データを簡単に渡したり、異なるページ間を移動したりできます。この記事では、Vue.js アプリケーションでルート パラメーターを使用する方法と、対応するコード例を示します。

まず、Vue-Router をインストールする必要があります。ターミナルで次のコマンドを実行して Vue-Router をインストールします:

npm install vue-router

インストールが完了したら、Vue-Router を導入する必要があります。 Vue アプリケーションを作成し、それを使用してルートを定義します。たとえば、このアプリケーションでは、次の 2 つのルートを定義できます:

// 导入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import Home from './components/Home'
import User from './components/User'

// 使用VueRouter
Vue.use(VueRouter)

// 定义路由
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/user/:id',
      component: User
    }
  ]
})

上記のコードでは、VueRouter を使用して 2 つのルート: / と /user/:id を定義します。これら 2 つのルートは、アプリケーションの Home コンポーネントと User コンポーネントに対応します。このうち、/はデフォルトルートを表しており、アプリケーションのルートディレクトリにアクセスした際に表示されるルートです。 /user/:id は動的ルートを表し、:id は /user/12345 などのユーザーの ID を表します。

アプリケーションでルーティング パラメーターを使用する場合、$route.params オブジェクトを通じてルーティング パラメーターを取得できます。たとえば、User コンポーネントでは、次のコードを使用してユーザーの ID を取得できます。

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

上記のコードでは、Vue.js のテンプレート構文を使用して、$route.params を通じて ID を取得します。 id 対応するユーザー情報を表示するユーザーの ID。

実際の開発では、$route.params を使用してルーティング パラメーターを取得し、データ リクエストのバックエンド サーバーに渡すことができます。たとえば、Axios を使用して、User コンポーネントでユーザーの詳細情報をリクエストできます。

<template>
  <div>
    <h1>User ID: {{ user.id }}</h1>
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.getUser(this.$route.params.id)
  },
  methods: {
    getUser(id) {
      axios.get(`/api/users/${id}`)
        .then(response => {
          this.user = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

上記のコードでは、Axios を使用してバックエンド サーバーに GET リクエストを送信し、ユーザーの詳細情報を取得します。 $route.params.id を通じてユーザーの ID を取得し、それを getUser メソッドに渡します。 getUser メソッドでは、Axios を使用してバックエンド サーバーにリクエストし、返されたデータをユーザー オブジェクトに保存します。最後に、テンプレート内のユーザー オブジェクトを使用して、ユーザーの詳細を表示します。

概要: Vue.js アプリケーションでルーティング パラメーターを使用すると、ページ ナビゲーションとデータ配信を簡単に実現できます。 Vue-Router を使用してルートを定義し、$route.params を使用してルート パラメータを取得し、それらをデータ リクエストのコンポーネントまたはバックエンド サーバーに渡すだけです。この記事を読んだ後は、Vue.js アプリケーションでルーティング パラメーターを使用する方法のスキルを習得したと思います。

以上がVue-Router: Vue アプリケーションでルート パラメーターを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。