uniappでページジャンプとナビゲーションを実装する方法

uniapp でページ ジャンプとナビゲーションを実装する方法

uniapp は、ワンタイム コーディングとマルチエンド パブリッシングをサポートするフロントエンド フレームワークです。 Vue.js と開発者は、uniapp を使用してモバイル アプリケーションを迅速に開発できます。 uniapp では、ページ ジャンプとナビゲーションの実装は非常に一般的な要件です。この記事では、uniapp でページジャンプとナビゲーションを実装する方法と、具体的なコード例を紹介します。

1. ページ ジャンプ

1. ページ ジャンプには uniapp が提供するメソッドを使用します

uniapp は、最も一般的なページ ジャンプのメソッドのセットを提供します。 1 つは、uni.navigateTo メソッドと uni.redirectTo メソッドです。これら 2 つのメソッドの機能はページジャンプを実現することですが、navigateTo は現在のページを保持して目的のページにジャンプするのに対し、redirectTo は現在のページを閉じて目的のページにジャンプする点が異なります。対象ページのページです。

たとえば、あるページのボタンをクリックして別のページにジャンプします。

<template>
  <view>
    <button @click="navigateToPage">跳转到目标页面</button>
  </view>
</template>
<script>
export default {
  methods: {
    navigateToPage() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage'
      })
    }
  }
}
</script>

2. uniapp が提供するルーティング ナビゲーション ガードを使用します

uniappルーティングおよびナビゲーション ガードも提供します。開発者は、ユーザーがログインしているかどうかの判断、ページにアクセス許可が必要かどうかの判断など、ページがジャンプする前にいくつかの処理を実行できます。

uniapp では、beforeEnter 関数を使用してルート ナビゲーション ガードを実装できます。たとえば、ターゲット ページを読み込む前にログイン ステータスをチェックする必要があります:

// main.js
import Vue from 'vue'
import App from './App'

Vue.prototype.$navigateTo = function (options) {
  // 在跳转前进行登录状态的检查
  if (!isLoggedIn()) {
    // 如果未登录，则跳转到登录页面
    uni.navigateTo({
      url: '/pages/login/login'
    })
    return
  }
  
  // 已登录，正常跳转
  uni.navigateTo(options)
}

new Vue({
  el: '#app',
  render: h => h(App)
})

// utils.js
export function isLoggedIn() {
  // 判断用户是否已登录
  // ...
}

上記のコードでは、ページがジャンプするときに最初にログイン ステータスがチェックされ、ログインしていない場合はログインにジャンプします。 .ページ。

2. ナビゲーション

1. トップ ナビゲーション バー

uniapp は、トップ ナビゲーション バーを実装するための uni-NavBar コンポーネントを提供します。このコンポーネントは、uniapp ページでトップ ナビゲーション バーの機能を実装するために使用できます。

たとえば、ページの上部ナビゲーション バーの効果を実現するには、次のようにします。

<template>
  <view>
    <uni-NavBar title="首页" :show-back="true" @click-left="navigateBack"></uni-NavBar>
    <!-- 页面内容 -->
  </view>
</template>
<script>
export default {
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

上記のコードでは、uni-NavBar コンポーネントが使用され、タイトルを「ホームページ」に設定し、同時に戻るボタンの表示を設定し、戻るボタンをクリックしたイベントをバインドします。

2. 下部ナビゲーション バー

uniapp は実装用に uni-tabbar コンポーネントと uni-tabbar-item コンポーネントを提供します下部ナビゲーションバー。これら 2 つのコンポーネントを uniapp ページで使用して、下部のナビゲーション バーの機能を実装できます。

たとえば、ページの下部ナビゲーション バーの効果を実現するには:

<template>
  <view>
    <!-- 页面内容 -->
  </view>
  <uni-tabbar>
    <uni-tabbar-item icon="home" text="首页" url="/pages/home/home"></uni-tabbar-item>
    <uni-tabbar-item icon="message" text="消息" url="/pages/message/message"></uni-tabbar-item>
    <uni-tabbar-item icon="user" text="我的" url="/pages/mine/mine"></uni-tabbar-item>
  </uni-tabbar>
</template>

上記のコードでは、uni-tabbar コンポーネントと uni -tabbar- item コンポーネントは、各 uni-tabbar-item にアイコン、テキスト、ジャンプ リンクを設定することで、下部ナビゲーション バーの効果を実現します。

まとめ:

以上は、uniapp でページジャンプとナビゲーションを実装する方法とサンプルコードで、uniapp が提供するメソッドとコンポーネントを利用することで、簡単にページジャンプとナビゲーションを実装することができます。関数。同時に、単一ページ アプリケーションの特性により、ページ間のジャンプやナビゲーションをより適切に制御できるようになります。

以上がuniappでページジャンプとナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。