uniapp에서 페이지로 이동하는 방법은 무엇입니까? 소개하는 두 가지 방법

uni-app은 Vue.js를 기반으로 하는 크로스 플랫폼 개발 프레임워크로, H5, 미니 프로그램, Android/iOS 및 기타 플랫폼 기반 애플리케이션을 개발하는 데 사용할 수 있습니다. 그 중에서 페이지 점프는 매우 중요한 기능입니다. 이 기사에서는 uni-app에서 흔히 사용되는 두 가지 페이지 점프 방법, 즉 라우팅 점프와 페이지 간 이벤트 통신을 소개합니다.

1. 루트 점프

루트 점프는 유니앱에서 페이지 URL을 변경하여 다른 페이지로 점프하는 것을 말합니다. uni-app은 다음을 포함한 일련의 경로 점프 API를 제공합니다.

1. 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>

2. 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>

3. 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>

4. 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()를 사용하세요. -다음과 같이 애플리케이션의 하단 탐색 모음 페이지 ：🎜rrreee

🎜uni.reLaunch()

🎜uni를 사용하세요. reLaunch() 모든 페이지를 닫으려면 다음과 같이 애플리케이션의 하단이 아닌 탐색 모음 페이지를 엽니다. 🎜rrreee

🎜uni.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!