uni-app微信小程序页面跳转方式_uni.navigateback-优快云博客

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

一、路由跳转

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

1. `uni.navigateTo`

uni.navigateTo 方法用于保留当前页面，跳转到应用内的某个页面。但是，它最多只能打开5层新页面。页面返回时，可回到原页面。

uni.navigateTo({
  url: 'path/to/your/page' // 目标页面的路径（不带参数）
});
uni.navigateTo({
  url: `../tabbar-2/tabbar-2?id=${id}`  // 目标页面的路径（带参数）
});

2. `uni.redirectTo`

uni.redirectTo 方法用于关闭当前页面，跳转到应用内的某个页面。该方法不会把当前页面加入堆栈，因此用户返回时，无法回到该页面。

uni.redirectTo({
  url: 'path/to/your/page' // 目标页面的路径
});

3. `uni.switchTab`

uni.switchTab 方法用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
  url: '/path/to/tabbar/page' // tabBar 页面路径，不能带参数
});

4. `uni.reLaunch`

uni.reLaunch 方法关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
  url: 'path/to/your/page' // 目标页面的路径
});

5. `uni.navigateBack`

uni.navigateBack 方法关闭当前页面，返回上一页面或多级页面。可通过 delta（默认为1）参数控制返回的层数。

// 返回上一级页面
uni.navigateBack({
  delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
});

注：确保在pages.json数组中声明了你的目标页面的路径，否则小程序会报错找不到页面。例如：


{
  "pages": [
    "pages/index/index", // 主页路径
    "pages/other/page"   // 目标页面的路径，确保此处声明了你的目标页面路径，以便正确跳转。注意这里的路径要和你在JS中使用的路径相匹配。
  ]
}

二、页面间事件通信

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