Comment accéder à la page dans uniapp ? Deux façons de présenter

uni-app est un framework de développement multiplateforme basé sur Vue.js. Nous pouvons l'utiliser pour développer des applications basées sur H5, des mini-programmes, Android/iOS et d'autres plateformes. Parmi eux, le saut de page est une fonction très critique. Cet article présentera deux méthodes de saut de page courantes dans uni-app, à savoir le saut de routage et la communication d'événements inter-pages.

1. Route Jump

Le saut d'itinéraire fait référence au saut vers différentes pages en modifiant l'URL de la page dans uni-app. uni-app fournit un ensemble d'API de saut d'itinéraire, notamment :

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.vueUtilisez uni.navigateTo() code> pouvez accéder à la page non inférieure de la barre de navigation de l'application, et n'oubliez pas d'utiliser la méthode <code>uni.navigateBack() sur la page cible pour revenir à la page d'origine, comme suit :

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

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

uni.redirectTo()

Utilisez uni.redirectTo() pour fermer toutes les pages actuelles et ouvrir le non -page de la barre de navigation inférieure de l'application, comme suit ：🎜rrreee

🎜uni.reLaunch()

🎜Utilisez uni. reLaunch() pour fermer toutes les pages, ouvrez la page de la barre de navigation non inférieure de l'application, comme suit : 🎜rrreee

🎜uni.switchTab()

🎜Utilisez uni. switchTab() pour accéder à la page de la barre de navigation inférieure de l'application, comme suit : 🎜rrreee🎜 2. Communication d'événements inter-pages🎜🎜Dans En plus des sauts de routage, nous pouvons également réaliser des sauts de page grâce à l'effet de communication d'événements inter-pages. Plus précisément, nous pouvons transmettre des paramètres à la page enfant via des accessoires dans la page parent et implémenter des sauts dans la page enfant via l'écoute d'événements. 🎜🎜Par exemple, nous avons une page parent index.vue, qui contient un bouton Lorsque le bouton est cliqué, l'événement childEvent() sera déclenché et les paramètres. sera transmis à la page enfant : 🎜rrreee🎜Dans la page enfant child.vue, nous utilisons des accessoires pour recevoir les paramètres passés par le parent, et écoutons l'événement backEvent du parent lorsque l'événement est. déclenché, effectuez une opération de saut : 🎜rrreee🎜Cet article Cet article présente deux méthodes courantes de saut de page dans uni-app, notamment le saut d'itinéraire et la communication d'événements inter-pages. Pour différents besoins commerciaux, nous pouvons choisir d'utiliser différentes méthodes de saut de page afin d'obtenir une meilleure expérience de développement et une meilleure expérience utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!