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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











この記事では、Vue.jsコンポーネントのエクスポートデフォルトの役割を明確にし、ライフサイクルフックを構成するのではなく、エクスポートのみのためであることを強調しています。 ライフサイクルフックは、コンポーネントのオプションオブジェクト内のメソッドとして定義されます。

この記事では、エクスポートのデフォルトを使用するときにVUE.JSコンポーネントウォッチ機能を明確にします。 プロパティ固有の監視、賢明な深いオプションの使用、および最適化されたハンドラー機能を通じて、効率的な時計の使用を強調しています。 ベストプラクティス

記事では、開発、統合、メンテナンスのベストプラクティスなど、カスタムVue.jsプラグインの作成と使用について説明します。

この記事では、vue.jsの州管理図書館であるVuexについて説明します。 コアの概念(状態、ゲッター、突然変異、行動)を詳述し、使用法を示し、より単純な代替案よりも大きなプロジェクトの利点を強調します。 デバッグと構造化

VUE.JSは、コンポーネントベースのアーキテクチャ、パフォーマンスのための仮想DOM、およびリアルタイムのUI更新用のリアクティブデータバインディングでWeb開発を強化します。

この記事では、高度なVueルーターのテクニックを調べます。 動的なルーティング(パラメーターを使用)、階層ナビゲーション用のネストされたルート、およびアクセスとデータフェッチを制御するためのルートガードをカバーします。 複雑なルート社を管理するためのベストプラクティス

この記事では、さまざまなビルドターゲットにVue CLIを構成し、環境を切り替え、生産ビルドを最適化し、デバッグ用のソースマップを確保する方法について説明します。

この記事では、VUEを使用してDockerを展開するために説明し、コンテナ内のVUEアプリケーションのセットアップ、最適化、管理、およびパフォーマンス監視に焦点を当てています。
