ホームページ > 記事 > ウェブフロントエンド > Vue ルーティングパラメータの設定方法の詳細な紹介
Vue ルーティングパラメータの設定方法の詳細な紹介
- PHPzオリジナル
- 2023-04-12 09:19:383334ブラウズ
Vue は、データ駆動型でコンポーネント化されたビューを中核とする進歩的な JavaScript フレームワークです。 Vue Router は、Vue.js の公式ルーティング マネージャーです。これにより、ルート経由でアプリケーションの状態を特定し、ユーザーの要求に応じて適切なコンポーネントをレンダリングできるようになります。
Vue ルーティングでは、パラメーターを含むプレースホルダーを含む動的ルートを定義できます。たとえば、ユーザー ID に一致するパラメーターを含むユーザー詳細の動的ルートを作成できます。このパラメータは、$route オブジェクトを通じてコンポーネント内で取得できます。
それでは、Vue ルーティングでパラメータを設定するにはどうすればよいでしょうか?この記事では、Vue Router をより良く使用できるように、Vue ルーティング パラメーターを設定する方法を詳しく紹介します。
- 基本的なパラメータ設定
Vue ルーティングでは、次の方法でルーティング パラメータを設定できます:
{
path: '/user/:id',
component: User
}
上の例では、A を定義します。パス「/user/:id」が指定されています。「:id」はパラメータ名を表します。たとえば、「/user/123」にアクセスした場合、パラメータ「id」の値は「123」になります。
コンポーネント内でこのパラメータにアクセスするのは非常に簡単です。$route オブジェクトの params 属性を使用するだけです:
export default {
name: 'User',
props: {
id: String
},
created () {
this.id = this.$route.params.id
}
}
コンポーネントでは、props 属性を使用して「id」をバインドできます。パラメータをコンポーネントに追加します。コンポーネント内では、this.$route.params.id を介して「id」パラメータの値にアクセスできます。
- オプションのパラメーター設定
基本パラメーターに加えて、Vue ルーティングではオプションのパラメーターを定義することもできます。この場合、パラメータ名の後に疑問符「?」が続きます。
{
path: '/user/:id?',
component: User
}
上の例では、「:id?」はパラメータ「id」がオプションであることを示しています。パス「/user」にアクセスするときに、間違ったルートが一致することはありません。
コンポーネント内では、$route オブジェクトのクエリ属性を使用して、オプションのパラメーターの値にアクセスできます。例:
export default {
name: 'User',
props: {
id: String
},
created () {
this.id = this.$route.params.id || this.$route.query.id
}
}
上の例では、ES6 構文を使用してデフォルト値を指定しました。 URL にパラメータ「id」が指定されていない場合は、クエリ属性を使用して取得します。
- 名前付きパラメータの設定
基本パラメータとオプションのパラメータに加えて、名前付きパラメータを使用してルート間でパラメータを安全に転送することもできます。名前付きパラメータを使用すると、ルートに渡されるパラメータをより明示的に表すことができます。
ルート定義の「name」属性を使用してルート名を指定できます。例:
{
path: '/user/:id',
component: User,
name: 'user'
}
上の例では、「name」属性を使用してルート名を「user」として指定しました。
コンポーネント内では、専用の "$router" および "$route" オブジェクトを通じてこの名前パラメーターにアクセスできます。例:
export default {
name: 'User',
props: {
id: String
},
created () {
this.id = this.$route.params.id
},
methods: {
goBack () {
this.$router.push({ name: 'user', params: { id: this.id } })
}
}
}
上の例では、name パラメーターを使用してルートを定義し、「goBack」メソッドでルート名を使用してルートを返します。
Vue ルーティングではパラメーターの設定が非常に重要です。基本パラメーター、オプションのパラメーター、および名前付きパラメーターはさまざまな方法で設定されるため、これらのさまざまな方法を理解する必要があります。これらのパラメーターの設定方法がわかったので、この記事が Vue Router をより良く使用するのに役立つことを願っています。
以上がVue ルーティングパラメータの設定方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。