uniappのページにジャンプするにはどうすればよいですか? 2つの導入方法

uni-app は Vue.js をベースとしたクロスプラットフォーム開発フレームワークで、H5、小規模プログラム、Android/iOS およびその他のプラットフォームに基づくアプリケーションの開発に使用できます。中でもページジャンプは非常に重要な機能ですが、本記事ではuni-appでよく使われる2つのページジャンプ方法、ルーティングジャンプとページ間イベント通信について紹介します。

1. ルーティング ジャンプ

ルーティング ジャンプとは、ユニアプリ内でページ URL を変更して別のページにジャンプすることを指します。 uni-app は、次のような一連のルート ジャンプ API を提供します:

1. uni.navigateTo()

Use uni.navigateTo( ) は、アプリケーションの下部以外のナビゲーション バー ページにジャンプできます。次のように、ターゲット ページで uni.navigateBack() メソッドを使用して元のページに戻ることを忘れないでください。 ##

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.navigateTo({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

2. uni.redirectTo()

uni.redirectTo() を使用して、現在のページをすべて閉じ、それ以外のページを開きます- アプリケーションの下部ナビゲーション バー ページ。次のとおりです。 ：

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.redirectTo({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

3. uni.reLaunch()

Use

uni.reLaunch( ) すべてのページを閉じてアプリケーションを開きます。下部以外のナビゲーション バー ページは次のとおりです:

<template>
  <view>
    <button @click="gotoPage2()">跳转到页面2</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoPage2() {
      uni.reLaunch({
        url: '/pages/page2/page2'
      })
    }
  }
}
</script>

4. uni.switchTab()

Use

uni.switchTab() 次のように、アプリケーションの下部ナビゲーション バー ページにジャンプできます。

<template>
  <view>
    <button @click="gotoTab3()">跳转到Tab3</button>
  </view>
</template>

<script>
export default {
  methods: {
    gotoTab3() {
      uni.switchTab({
        url: '/pages/tab3/tab3'
      })
    }
  }
}
</script>

2. ページ間イベント通信

ルーティングジャンプに加えて、ページ間イベント通信によるページジャンプも実現できます。 回転の効果。具体的には、親ページの props を通じて子ページにパラメータを渡し、イベント リスニングを通じて子ページにジャンプを実装できます。

たとえば、ボタンを含む親ページ

index.vue があります。ボタンがクリックされると、childEvent() イベントがトリガーされ、パラメータ:

<template>
  <view>
    <button @click="childEvent()">跳转到Child页面</button>
    <child :name="name" @backEvent="backEvent"></child>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: 'Mike'
    }
  },
  methods: {
    childEvent() {
      this.name = 'Jerry'
      this.$refs.child.childEvent()
    },
    backEvent(msg) {
      console.log(msg) // '我已经回来了'
    }
  }
}
</script>

子ページ

child.vue では、props を使用して親から渡されたパラメータを受け取り、親の backEvent イベントをリッスンします。イベントがトリガーされた場合、ジャンプ操作を実行します :

<template>
  <view>
    <text>{{ name }}</text>
  </view>
</template>

<script>
export default {
  props: {
    name: String
  },
  methods: {
    childEvent() {
      this.$emit('backEvent', '我已经回来了')
    }
  }
}
</script>

この記事では、ルート ジャンプとページ間イベント通信を含む、ユニアプリでの 2 つの一般的なページ ジャンプ方法を紹介します。さまざまなビジネス ニーズに合わせて、ページ ジャンプにさまざまな方法を使用することを選択して、より良い開発エクスペリエンスとユーザー エクスペリエンスを実現できます。

以上がuniappのページにジャンプするにはどうすればよいですか? 2つの導入方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。