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() 可以關閉目前所有頁面，開啟應用程式的非底部導覽列頁面，如下：
<template>
<view>
<button @click="gotoPage2()">跳转到页面2</button>
</view>
</template>
<script>
export default {
methods: {
gotoPage2() {
uni.redirectTo({
url: '/pages/page2/page2'
})
}
}
}
</script>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() 可以跳到應用程式的底部導覽列頁面，如下：
<template>
<view>
<button @click="gotoTab3()">跳转到Tab3</button>
</view>
</template>
<script>
export default {
methods: {
gotoTab3() {
uni.switchTab({
url: '/pages/tab3/tab3'
})
}
}
}
</script>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>以上是uniapp怎麼跳轉頁？兩種方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
