uni-app 是一个基于Vue.js的跨平台开发框架，我们可以用它来开发基于H5、小程序、Android/iOS等多平台的应用程序。其中，页面跳转是一个非常关键的功能，本文将会介绍uni-app中常见的两种页面跳转方式，分别是路由跳转和页面间事件通信。
一、路由跳转
路由跳转是指在uni-app中通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API，包括：
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 中，我们使用 props 接收父级传递的参数，并监听父级的 backEvent 事件，当事件触发时，执行跳转操作：
<template>
<view>
<text>{{ name }}</text>
</view>
</template>
<script>
export default {
props: {
name: String
},
methods: {
childEvent() {
this.$emit('backEvent', '我已经回来了')
}
}
}
</script>本文介绍了uni-app中常见的两种页面跳转方式，包括路由跳转和页面间事件通信。针对不同的业务需求，我们可以选择使用不同的方式进行页面跳转，以达到更好的开发体验和用户体验。
以上是uniapp怎么跳转页面？两种方式介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
