Vue ルーティングパラメータの設定方法の詳細な紹介

Vue は、データ駆動型でコンポーネント化されたビューを中核とする進歩的な JavaScript フレームワークです。 Vue Router は、Vue.js の公式ルーティング マネージャーです。これにより、ルート経由でアプリケーションの状態を特定し、ユーザーの要求に応じて適切なコンポーネントをレンダリングできるようになります。

Vue ルーティングでは、パラメーターを含むプレースホルダーを含む動的ルートを定義できます。たとえば、ユーザー ID に一致するパラメーターを含むユーザー詳細の動的ルートを作成できます。このパラメータは、$route オブジェクトを通じてコン​​ポーネント内で取得できます。

それでは、Vue ルーティングでパラメータを設定するにはどうすればよいでしょうか?この記事では、Vue Router をより良く使用できるように、Vue ルーティング パラメーターを設定する方法を詳しく紹介します。

1. 基本的なパラメータ設定

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」パラメータの値にアクセスできます。

2. オプションのパラメーター設定

基本パラメーターに加えて、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」が指定されていない場合は、クエリ属性を使用して取得します。

3. 名前付きパラメータの設定

基本パラメータとオプションのパラメータに加えて、名前付きパラメータを使用してルート間でパラメータを安全に転送することもできます。名前付きパラメータを使用すると、ルートに渡されるパラメータをより明示的に表すことができます。

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