Maison >interface Web >uni-app >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 :
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>
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>
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>
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.vue
Utilisez 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()
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 :🎜rrreeeuni.reLaunch()
uni. reLaunch()
pour fermer toutes les pages, ouvrez la page de la barre de navigation non inférieure de l'application, comme suit : 🎜rrreeeuni.switchTab()
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!