Wie springe ich zur Seite in Uniapp? Zwei Möglichkeiten zur Einführung

uni-app ist ein plattformübergreifendes Entwicklungsframework auf Basis von Vue.js. Wir können damit Anwendungen auf Basis von H5, Miniprogrammen, Android/iOS und anderen Plattformen entwickeln. Unter diesen ist der Seitensprung eine sehr wichtige Funktion. In diesem Artikel werden zwei gängige Seitensprungmethoden in der Uni-App vorgestellt, nämlich Routing-Sprung und Kommunikation zwischen Seitenereignissen.

1. Routensprung

Routensprung bezieht sich auf das Springen zu verschiedenen Seiten durch Ändern der Seiten-URL in der Uni-App. uni-app bietet eine Reihe von Routensprung-APIs, darunter:

1. uni.navigateTo()

uni.navigateTo()

使用 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()

使用 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()

使用 uni.switchTab() 可以跳转到应用的底部导航栏页面，如下：

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

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

二、页面间事件通信

除了路由跳转，我们还可以通过页面间事件通信来达到页面跳转的效果。具体而言，我们可以在父级页面中通过 props 给子页面传递参数，并通过事件监听来实现子页面中的跳转。

例如，我们有一个父级页面 index.vue，其中包含一个 button，点击button后会触发 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.vueVerwenden Sie uni.navigateTo() code> Sie können zur nicht unteren Navigationsleistenseite der Anwendung springen. Denken Sie daran, die Methode <code>uni.navigateBack() auf der Zielseite wie folgt zu verwenden, um zur Originalseite zurückzukehren:

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

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

uni.redirectTo()

Verwenden Sie uni.redirectTo(), um alle aktuellen Seiten zu schließen und die anderen zu öffnen -untere Navigationsleistenseite der Anwendung, wie folgt: 🎜rrreee

🎜uni.reLaunch()

🎜Verwenden Sie uni. reLaunch(), um alle Seiten zu schließen, öffnen Sie die nicht untere Navigationsleistenseite der Anwendung wie folgt: 🎜rrreee

🎜uni.switchTab()

🎜Mit uni.switchTab() können Sie wie folgt zur unteren Navigationsleistenseite der Anwendung springen: 🎜rrreee🎜 2. Ereigniskommunikation zwischen Seiten🎜🎜In Neben Routing-Sprüngen können wir auch Seitensprünge durch interseitige Ereigniskommunikation erzielen. Insbesondere können wir über Requisiten auf der übergeordneten Seite Parameter an die untergeordnete Seite übergeben und durch Ereignisüberwachung Sprünge auf der untergeordneten Seite implementieren. 🎜🎜Zum Beispiel haben wir eine übergeordnete Seite index.vue, die eine Schaltfläche enthält. Wenn auf die Schaltfläche geklickt wird, wird das Ereignis childEvent() und die Parameter ausgelöst wird an die untergeordnete Seite übergeben: 🎜rrreee🎜Auf der untergeordneten Seite child.vue verwenden wir Requisiten, um die vom übergeordneten Element übergebenen Parameter zu empfangen und das backEvent-Ereignis des übergeordneten Elements abzuhören ausgelöst, führen Sie einen Sprungvorgang aus: 🎜rrreee🎜Dieser Artikel In diesem Artikel werden zwei gängige Seitensprungmethoden in der Uni-App vorgestellt, einschließlich Routensprung und Ereigniskommunikation zwischen Seiten. Für unterschiedliche Geschäftsanforderungen können wir unterschiedliche Methoden für Seitensprünge verwenden, um eine bessere Entwicklungserfahrung und Benutzererfahrung zu erzielen. 🎜

Das obige ist der detaillierte Inhalt vonWie springe ich zur Seite in Uniapp? Zwei Möglichkeiten zur Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!