uni-app 是一个基于vue.js的跨平台开发框架,我们可以用它来开发基于h5、小程序、android/ios等多平台的应用程序。其中,页面跳转是一个非常关键的功能,本文将会介绍uni-app中常见的两种页面跳转方式,分别是路由跳转和页面间事件通信。
一、路由跳转
路由跳转是指在uni-app中通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API,包括:
uni.navigateTo()
使用 uni.navigateTo() 可以跳转到应用的非底部导航栏页面,同时记得在目标页面使用 uni.navigateBack() 方法返回原页面,如下:
uni.redirectTo()
使用 uni.redirectTo() 可以关闭当前所有页面,打开应用的非底部导航栏页面,如下:
uni.reLaunch()
使用 uni.reLaunch() 可以关闭所有页面,打开应用的非底部导航栏页面,如下:
uni.switchTab()
使用 uni.switchTab() 可以跳转到应用的底部导航栏页面,如下:
二、页面间事件通信
除了路由跳转,我们还可以通过页面间事件通信来达到页面跳转的效果。具体而言,我们可以在父级页面中通过 props 给子页面传递参数,并通过事件监听来实现子页面中的跳转。
例如,我们有一个父级页面 index.vue,其中包含一个 button,点击button后会触发 childEvent()事件,并给子页面传递参数:
在子页面 child.vue 中,我们使用 props 接收父级传递的参数,并监听父级的 backEvent 事件,当事件触发时,执行跳转操作:
{{ name }}
本文介绍了uni-app中常见的两种页面跳转方式,包括路由跳转和页面间事件通信。针对不同的业务需求,我们可以选择使用不同的方式进行页面跳转,以达到更好的开发体验和用户体验。










