ルート管理とページジャンプを実装するための UniApp のヒント-uni-app-php.cn

ルート管理とページジャンプを実装するための UniApp のヒント

王林

リリース： 2023-07-04 12:28:36

オリジナル

1615 人が閲覧しました

UniApp は、ルーティング管理とページジャンプの実装に関するヒントを共有します

UniApp は、Vue.js に基づくクロスプラットフォーム開発フレームワークであり、iOS、Android、Web などの複数のプラットフォーム向けのアプリケーションの開発に使用できます。 . . UniApp では、ルート管理とページジャンプは非常に重要な部分です。この記事では、ルート管理とページジャンプを実装するための UniApp のヒントと、参考となるコード例を紹介します。

ルーティング管理

UniApp は、Vue Router を使用してルーティングを管理し、ルーティングの構成と操作のためのいくつかの共通 API を提供します。ルーティングの使用を開始する前に、Vue Router プラグインをインストールして導入する必要があります。 main.js ファイルでは、次のように構成できます:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App,
  router
})
app.$mount()

ログイン後にコピー

ここでは、Vue Router プラグインを導入し、それを router オブジェクトに割り当てます。。次に、Vue アプリケーションをインスタンス化するときに、router オブジェクトを Vue インスタンスに挿入し、アプリケーション全体で使用できるようにします。

ページジャンプ

UniApp は、ページジャンプの変更を実現する 2 つのメソッド uni.navigateTo と uni.redirectTo を提供します。 uni.navigateTo は新しいページにジャンプして元のページのステータスを保持するために使用され、uni.redirectTo は現在のページを直接置換するために使用されます。

次の例は、UniApp でページジャンプにルーティングを使用する方法を示しています:

// 在A页面中跳转到B页面
uni.navigateTo({
  url: '/pages/B'
})

// 在B页面中跳转到C页面
uni.navigateTo({
  url: '/pages/C'
})

// 在C页面中跳转到D页面，并关闭C页面
uni.redirectTo({
  url: '/pages/D'
})

ログイン後にコピー

この例では、ページ A、B、C でそれぞれ uni を使用します。 はページジャンプを実行し、それぞれ B、C、D ページにジャンプします。 C ページでは、uni.redirectTo メソッドを使用して C ページを閉じ、D ページにジャンプします。

ルートパラメータの受け渡し

ルート間でパラメータを受け渡す必要がある場合があります。UniApp では、ルートパラメータの受け渡しを実装するための 2 つの方法 (クエリパラメータを使用する方法と params パラメータを使用する方法) を提供しています。

クエリパラメータを使用すると、以下に示すように、ジャンプ時に URL にパラメータを追加できます:

uni.navigateTo({
  url: '/pages/B?id=1&name=example'
})

ログイン後にコピー

パラメータを受け取るページで、this.$route.query を渡すことができます。 パラメータ値を取得するには、以下に示すようにします。

export default {
  mounted() {
    console.log(this.$route.query.id) // 输出1
    console.log(this.$route.query.name) // 输出example
  }
}

ログイン後にコピー

params パラメータを使用するには、以下に示すように、ルーティング設定でパラメータ名を定義する必要があります。

// 在路由配置中定义参数名
{
  path: '/pages/B/:id/:name',
  name: 'B',
  component: B
}

ログイン後にコピー

Thenでは、以下に示すように uni.navigateTo メソッドを使用してパラメータを渡すことができます。

uni.navigateTo({
  url: '/pages/B/1/example'
})

ログイン後にコピー

パラメータを受け取るページで、this.$route を通じてパラメータ値を取得できます。 params、次のように表示:

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
    console.log(this.$route.params.name) // 输出example
  }
}

ログイン後にコピー

上記の例を通じて、UniApp でのルーティング管理とページジャンプの基本的な操作を確認できます。 Vue Router プラグインが提供する API を使用すると、ルーティングを簡単に設定および操作でき、uni.navigateTo メソッドと uni.redirectTo メソッドを通じてページジャンプを実装できます。同時に、UniApp はパラメーターを渡す方法も提供しており、必要に応じてクエリパラメーターまたは params パラメーターを使用してパラメーターを渡すことを選択できます。

この記事が、UniApp のルーティング管理とページジャンプ機能を皆さんがよりよく理解し、使用できるようになれば幸いです。 UniApp についてその他の質問がある場合は、UniApp の公式ドキュメントを確認するか、他の関連資料を参照してください。 UniApp 開発で良い結果が得られることを祈っています。

以上がルート管理とページジャンプを実装するための UniApp のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。