uniapp怎么跳转页面？两种方式介绍

uni-app 是一个基于vue.js的跨平台开发框架，我们可以用它来开发基于h5、小程序、android/ios等多平台的应用程序。其中，页面跳转是一个非常关键的功能，本文将会介绍uni-app中常见的两种页面跳转方式，分别是路由跳转和页面间事件通信。

一、路由跳转

路由跳转是指在uni-app中通过改变页面url的方式来跳转到不同的页面。uni-app提供了一套路由跳转的API，包括：

1. 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() 可以跳转到应用的底部导航栏页面，如下：

PaperFake

AI写论文

下载

<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中常见的两种页面跳转方式，包括路由跳转和页面间事件通信。针对不同的业务需求，我们可以选择使用不同的方式进行页面跳转，以达到更好的开发体验和用户体验。