uni-app은 Vue.js를 기반으로 하는 크로스 플랫폼 개발 프레임워크로, H5, 미니 프로그램, Android/iOS 및 기타 플랫폼 기반 애플리케이션을 개발하는 데 사용할 수 있습니다. 그 중에서 페이지 점프는 매우 중요한 기능입니다. 이 기사에서는 uni-app에서 흔히 사용되는 두 가지 페이지 점프 방법, 즉 라우팅 점프와 페이지 간 이벤트 통신을 소개합니다.
1. 루트 점프
루트 점프는 유니앱에서 페이지 URL을 변경하여 다른 페이지로 점프하는 것을 말합니다. uni-app은 다음을 포함한 일련의 경로 점프 API를 제공합니다.
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.vueuni.navigateTo() code> 사용 애플리케이션의 하단이 아닌 탐색 모음 페이지로 이동할 수 있으며, 다음과 같이 대상 페이지에서 <code>uni.navigateBack() 메서드를 사용하여 원래 페이지로 돌아가는 것을 기억하세요.
<template>
<view>
<text>{{ name }}</text>
</view>
</template>
<script>
export default {
props: {
name: String
},
methods: {
childEvent() {
this.$emit('backEvent', '我已经回来了')
}
}
}
</script> uni.redirectTo()
uni.redirectTo()를 사용하세요. -다음과 같이 애플리케이션의 하단 탐색 모음 페이지 ：🎜rrreeeuni.reLaunch()
uni를 사용하세요. reLaunch() 모든 페이지를 닫으려면 다음과 같이 애플리케이션의 하단이 아닌 탐색 모음 페이지를 엽니다. 🎜rrreeeuni.switchTab() uni.switchTab()을 사용하면 다음과 같이 애플리케이션의 하단 탐색 표시줄 페이지로 이동할 수 있습니다. 🎜rrreee🎜 2. 페이지 간 이벤트 통신🎜🎜In 라우팅 점프 외에도 페이지 간 이벤트 통신 효과를 통해 페이지 점프를 달성할 수도 있습니다. 특히, 상위 페이지의 props를 통해 하위 페이지에 매개변수를 전달할 수 있고, 이벤트 수신을 통해 하위 페이지에서 점프를 구현할 수 있습니다. 🎜🎜예를 들어, 버튼을 클릭하면 childEvent() 이벤트가 트리거되고 매개변수가 포함된 상위 페이지 index.vue가 있습니다. 🎜rrreee🎜하위 페이지 child.vue에서는 props를 사용하여 부모가 전달한 매개변수를 수신하고 이벤트가 발생하면 부모의 backEvent 이벤트를 수신합니다. Triggered, Perform a Jump Operation: 🎜rrreee🎜이 글 이 글에서는 경로 점프와 페이지 간 이벤트 통신을 포함하여 uni-app에서 흔히 사용되는 두 가지 페이지 점프 방법을 소개합니다. 다양한 비즈니스 요구 사항에 따라 더 나은 개발 경험과 사용자 경험을 달성하기 위해 다양한 페이지 이동 방법을 사용할 수 있습니다. 🎜위 내용은 uniapp에서 페이지로 이동하는 방법은 무엇입니까? 소개하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
