ホームページ >ウェブフロントエンド >uni-app >ルート管理とページジャンプを実装するための UniApp のヒント
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 サイトの他の関連記事を参照してください。