uniapp でルーティングを使用するためのヒント

ユニアプリでルーティングを使用するためのヒント

1. 概要
ユニアプリ開発では、ルーティングは非常に重要な側面であり、ジャンプページとページ間のルーティングを実現できます。パラメータを渡します。この記事では、uniapp でのルーティングの使用スキルを紹介し、具体的なコード例を示します。

2. uniapp ルーティングの基本的な使用法
uniapp では、ルーティングの基本的な使用法を使用して、uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab などの API を介してページにジャンプできます。 、など。これらの API の使用シナリオは若干異なり、具体的な使用方法はプロジェクトの要件によって異なります。

1. uni.navigateTo: 新しいページを開いて現在のページを保持するために使用されます。通常のページジャンプに適しています。
   サンプルコード:

   uni.navigateTo({
    url: '/pages/detail/detail?id=1'
   });

2. uni.redirectTo: 現在のページを閉じて、新しいページを開くために使用されます。前のページに戻る必要がないページジャンプに適しています。
   サンプル コード:

   uni.redirectTo({
    url: '/pages/home/home'
   });

3. uni.reLaunch: すべてのページを閉じて、アプリケーション内のページを開きます。 QR コードをスキャンして他のプラットフォームからミニ プログラムに入るシナリオに適しています。
   サンプル コード:

   uni.reLaunch({
    url: '/pages/login/login'
   });

4. uni.switchTab: tarBar ページにジャンプし、他の非 tarBar ページをすべて閉じます。下部のナビゲーション バーでページ間を移動するのに適しています。
   サンプルコード:

   uni.switchTab({
    url: '/pages/home/home'
   });

3. uniapp ルーティングパラメータの転送
uniapp では、URL パラメータを介してページ間でデータを転送できます。

1. ページ間でのパラメータの受け渡し
   ページ A からページ B にジャンプするとき、URL パラメータを介してデータを渡すことができます。ページ A のジャンプ コードでは、パラメータは URL を結合することによって渡されます:

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

ページ B では、パラメータ値は uni.$route.query を通じて取得できます:

onLoad() {
    console.log(this.$route.query.id);
}

2. ページが戻ったときにパラメータを渡す
   uniapp では、uni.navigateBack メソッドを通じて前のページに戻り、前のページの onBack メソッドを呼び出してパラメータを渡すことができます。具体的なコードは次のとおりです。
   ページAで、ページBにジャンプするときにパラメータを渡し、前のページのonBackメソッドを登録します。

   uni.navigateTo({
    url: '/pages/detail/detail?id=' + id + '&callback=onBack'
   });

ページBで、Getパラメータ値を指定し、ページが戻ってパラメータを渡すときに前のページの onBack メソッドを呼び出します。

methods: {
    goBack() {
        uni.navigateBack({
            delta: 1,
            success: () => {
                uni.getOpenerEventChannel().emit(this.asr_notify);
            }
        });
    }
}

ページ A で、onBack メソッドを登録し、パラメータを受け取ります。

methods: {
    onBack(data) {
        console.log(data);
    }
}

4 . uniapp routing インターセプトと権限の制御
開発プロセス中、ログインしていないユーザーが特定のページにアクセスできないように、特定のページの権限を制御する必要がある場合があります。

uniapp では、ナビゲーション ガードを通じてルーティング インターセプトと許可制御を実装できます。具体的なコードは次のとおりです。

1. main.js ファイルでグローバル ルート インターセプターを作成します。

   // 全局路由拦截器
   router.beforeEach((to, from, next) => {
    const token = uni.getStorageSync('token');
    if (to.meta.requiresAuth && !token) { // 判断是否需要登录才能查看页面
        next('/pages/login/login');
    } else {
        next();
    }
   });

2. ページで次のように構成します。権限制御が必要です ルーティング メタ情報:

   export default {
    meta: {
        requiresAuth: true // 需要登录才能访问
    }
    // 省略其他代码...
   }

上記の操作により、アクセスにログインが必要なページに権限制御を実装できます。ログインしていないユーザーはインターセプトされ、次のページにジャンプします。ログインページ。

概要:
この記事では、uniapp でのルーティングの基本的な使用法、パラメーターの受け渡し方法、ルーティングのインターセプト、およびアクセス許可の制御について紹介します。ルーティングを適切に使用することで、ページ間のジャンプやデータ転送が実現され、アプリケーションのユーザー エクスペリエンスが向上します。

この記事が uniapp ルーティングの使用に役立つことを願っています。

以上がuniapp でルーティングを使用するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。