Vue では、ルート パラメーターを使用して、異なるページ間でデータを渡すことができます。ルーティング パラメータは、URL またはクエリ パラメータを介して渡すことができます。
1. URL パラメータを使用してデータを渡します。
URL パラメータは通常、ルーティング パスでデータを渡すために使用され、パラメータを渡すための非常に直感的で一般的な方法です。
ルートを定義する場合、ルート パス内の動的セグメントを使用してパラメータの位置を指定できます。動的フラグメントはコロンで始まります。たとえば、`/:id` は、パラメータ `id` が動的フラグメントであり、任意の値と一致することを示します。
コンポーネントでは、「$route.params」経由で URL パラメータにアクセスできます。
```javascript
// main.js「vue」から Vue をインポートします。
「./App.vue」からアプリをインポートします。
'vue-router' から VueRouter をインポートします。
UserInfo を './components/UserInfo.vue' からインポートします。
UserProfile を './components/UserProfile.vue' からインポートします。Vue.use(VueRouter);
const Routes = [
{ パス: '/user-info/:id', コンポーネント: UserInfo },
{ パス: '/user-profile/:username', コンポーネント: UserProfile },
];const ルーター = new VueRouter({ ルート, });
new Vue({ render: h => h(App), router, }).$mount('#app'); 「」
上の例では、`/user-info/:id` と `/user-profile/:username` という 2 つのルートを定義しました。`:id` と `:username` は実際の値と一致する動的フラグメントです。
コンポーネントでは、渡されたパラメータに「this.$route.params」を通じてアクセスできます。
```vue
<!-- UserInfo.vue -->
<template>
<div>
<h1>ユーザー情報ページ</h1>
<p>ユーザー ID: { { $route.params.id }}</p>
</div>
</template>
``
2. クエリパラメータを使用してデータを渡します。
クエリ パラメータは通常、URL の後に追加のパラメータを追加するために使用され、「key=value」の形式でデータを渡します。クエリパラメータは「?」記号で始まり、各パラメータは「&」記号で区切られます。
コンポーネントでは、「$route.query」を介してクエリパラメータにアクセスできます。
```javascript
// main.js// ... (前のコード)
const Routes = [
// ... (以前のルーティング設定)
{ path: '/user-info'、component: UserInfo },
];const ルーター = new VueRouter({ ルート, });
new Vue({ render: h => h(App), router, }).$mount('#app'); 「」
上の例では、動的フラグメントを持たないルート `/user-info` を定義しました。
コンポーネントでは、「this.$route.query」を介してクエリパラメータにアクセスできます。
```vue
<!-- UserInfo.vue -->
<template>
<div>
<h1>ユーザー情報ページ</h1>
<p>ユーザー ID: { { $route.query.id }}</p>
<p>ユーザー名: { { $route.query.username }}</p>
</div>
</template>
```
クエリ パラメータを使用してデータを渡すには、「/user-info?id=123&username=johndoe」などのクエリ パラメータを URL に手動で追加する必要があります。このようにして、コンポーネント内の `$route.query` は、渡されたパラメーター値にアクセスできます。
概要: Vue では、URL パラメーターとクエリ パラメーターを通じてルーティング パラメーターを実装できます。URL パラメーターを使用すると、パラメーター情報を URL 内で直接エンコードできますが、クエリ パラメーターを使用すると、追加の構成情報を渡すのに適しています。ニーズに応じて、適切なパラメータの受け渡し方法を選択してください。