uniappルーティングでパラメータを使用してジャンプを実装する方法

UniApp は、コードを一度作成して複数のプラットフォームに同時に公開することをサポートするクロスプラットフォーム開発フレームワークです。 UniApp では、異なるページ間をジャンプするためにルーティング ジャンプ機能を使用する必要があることがよくあります。その中でも、パラメータを使用したジャンプは比較的一般的な状況です。この記事では、パラメータジャンプを使用したUniAppルーティングを紹介します。

1. ルート ジャンプ

UniApp では、uni.navigateTo() 関数を通じてルート ジャンプを実装します。この機能は、ホームページから詳細ページへのジャンプなど、あるページから別のページへジャンプするために使用できます。次に、基本的なジャンプの例を示します。

// index.vue
uni.navigateTo({
  url: '/pages/detail/detail'
})

上記の例では、ジャンプ パスは url パラメータで指定されています。このパスは「/」で始まる相対パスで、pages ディレクトリ内の詳細ページにジャンプすることを意味します。

2. パラメーター付きジャンプ

ページ間でデータを転送する必要がある場合は、パラメーター付きジャンプを使用する必要があります。たとえば、一覧ページから詳細ページにジャンプする場合、現在選択されているアイテムの ID を渡す必要があります。 UniApp では、uni.navigateTo() 関数を使用するときに、クエリ パラメーターを介してパラメーターを渡すことができます。パラメーターを使用してジャンプする例を次に示します。

// list.vue
uni.navigateTo({
  url: '/pages/detail/detail?id=' + item.id
})

上記の例では、url パラメーターにクエリ文字列を追加することでパラメーターが渡されます。クエリ文字列は「?」で始まり、その後にパラメータ名とパラメータ値が続き、「&」を使用して複数のパラメータを区切ります。たとえば、「id=1&name=Zhang San」は、ID と名前の 2 つのパラメーターが渡され、その値がそれぞれ 1 と Zhang San であることを意味します。

パラメータを受け取るときは、this.$route.query 属性を通じて渡されたパラメータを取得できます。例:

// detail.vue
console.log(this.$route.query.id) // 输出传递过来的ID参数的值

上記の例では、ID パラメーターの値は this.$route.query.id を通じて取得され、コンソールに出力されます。

3. 概要

パラメータ付きジャンプは UniApp で広く使用されており、さまざまなパラメータやデータを渡すために使用できます。 uni.navigateTo() とクエリ パラメーターを使用すると、パラメーターを使用したページ ジャンプを簡単に実装できます。 UniApp アプリケーションを開発するときにページにジャンプする必要がある場合、上記の例を参照し、対応する方法を使用してそれを実現できます。

以上がuniappルーティングでパラメータを使用してジャンプを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。