uniappでパラメータをルーティングする方法の詳細な説明

Uniapp はクロスプラットフォームのフロントエンド開発フレームワークであり、最大の特徴は複数のプラットフォーム向けのアプリケーションを同時に開発できることです。 Uniapp では、ルーティング パラメータの受け渡しは非常に一般的で重要な機能です。この記事では、Uniapp でパラメーターをルーティングする方法を詳細に紹介し、誰もがそれをよりよく理解して適用できるように、具体的なコード例を提供します。

Uniapp でのルーティング パラメータは、ページ A からページ B にジャンプしてページ B にパラメータを渡す、ページ B がパラメータを受け取って使用するという 2 つの状況に分けることができます。

1. ページ A からページ B にジャンプし、ページ B にパラメータを渡します

1. ジャンプ時にパラメータを渡します (URL 経由でパラメータを渡します)

ジャンプ内uni.navigateTo や uni.redirectTo などのメソッドを使用すると、URL を通じてパラメータをターゲット ページに渡すことができます。コード例は次のとおりです。

uni.navigateTo({
  url: '/pages/b-page/b-page?id=1&name=uniapp',
  success: (res) => {
    console.log('跳转成功')
  }
})

ターゲット ページ B では、URL パラメーターを取得することで、渡されたパラメーターを取得できます。コード例は次のとおりです。

export default {
  onLoad(options) {
    console.log(options.id)   // 输出：1
    console.log(options.name) // 输出：uniapp
  }
}

2. ジャンプ時にパラメータを渡す (クエリを介してパラメータを渡す)

URL を介してパラメータを渡すことに加えて、Uniapp は別の方法も提供します。パラメータを渡す、つまりクエリを通じてパラメータを渡す。コード例は次のとおりです。

uni.navigateTo({
  url: '/pages/b-page/b-page',
  query: {
    id: 1,
    name: 'uniapp'
  },
  success: (res) => {
    console.log('跳转成功')
  }
})

ターゲット ページ B では、クエリ パラメーターを取得することで、渡されたパラメーターを取得できます。コード例は次のとおりです。

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
  }
}

2. ページ B はパラメータを受け取り、

パラメータが URL 経由で渡されるかクエリ経由で渡されるかに関係なく、渡されたパラメータは対象ページB。ターゲット ページ B では、onLoad ライフサイクル関数またはパラメーターを使用する必要があるその他の場所で処理できます。コード例は次のとおりです。

export default {
  onLoad(query) {
    console.log(query.id)   // 输出：1
    console.log(query.name) // 输出：uniapp
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

ライフサイクル関数でパラメーターを受け取るだけでなく、データ属性で変数を定義してパラメーターを受け取って使用することもできます。コード例は次のとおりです。

export default {
  data() {
    return {
      id: null,
      name: ''
    }
  },
  onLoad(query) {
    this.id = query.id
    this.name = query.name
    // 接收到参数后，可以进行相应的逻辑处理
  }
}

上記の方法により、Uniapp のページ間のパラメータ転送を簡単に実装できます。 URL 経由でパラメータを渡す場合でも、クエリ経由でパラメータを渡す場合でも、Uniapp は実装するためのシンプルかつ柔軟な方法を提供し、実際の開発で広く使用されています。この記事の手順とサンプル コードが、読者の Uniapp のルーティング パラメーター受け渡し関数の理解を深め、使用するのに役立つことを願っています。

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