UniApp（跨平台应用开发框架）是基于Vue.js的一种开发框架，可以用于同时在多个平台上构建应用程序，如iOS、Android等。在UniApp中，跳转页面通常使用uni.navigateTo、uni.redirectTo、uni.reLaunch等方法，具体方法的选择取决于你的需求。

 

1.常用跳转方式介绍

1. uni.navigateTo:

用法：uni.navigateTo({ url: '目标页面路径' })

描述：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

示例：uni.navigateTo({ url: '/pages/detail/detail' })

<template>
  <view>
    <button @click="navigateToPage">跳转到新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage() {
      uni.navigateTo({
        url: '/pages/newPage/newPage'
      });
    }
  }
}
</script>

2. uni.redirectTo:

用法：uni.redirectTo({ url: '目标页面路径' })

描述：关闭当前页面，跳转到应用内的某个页面。不可返回到原页面。

示例：uni.redirectTo({ url: '/pages/login/login' })

<template>
  <view>
    <button @click="redirectToPage">重定向到新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToPage() {
      uni.redirectTo({
        url: '/pages/newPage/newPage'
      });
    }
  }
}
</script>

3. uni.reLaunch:

用法：uni.reLaunch({ url: '目标页面路径' })

描述：关闭所有页面，打开应用内的某个页面。适用于一些非常重要的页面，如应用启动页。

示例：uni.reLaunch({ url: '/pages/index/index' })

<template>
  <view>
    <button @click="reLaunchPage">重新启动应用到新页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    reLaunchPage() {
      uni.reLaunch({
        url: '/pages/newPage/newPage'
      });
    }
  }
}
</script>

4. uni.switchTab:

用法：uni.switchTab({ url: '目标页面路径' })

描述：跳转到应用内的某个tabBar页面，关闭其他所有非tabBar页面。

示例：uni.switchTab({ url: '/pages/home/home' })

<template>
  <view>
    <button @click="switchTab">切换到 tabBar 页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchTab() {
      uni.switchTab({
        url: '/pages/tabBarPage/tabBarPage'
      });
    }
  }
}
</script>

5. uni.navigateBack:

用法：uni.navigateBack({ delta: 1 })

描述：返回上一级页面。参数delta表示返回的层数，默认为1。

示例：uni.navigateBack({ delta: 2 })

<template>
  <view>
    <button @click="navigateBack">返回上一页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateBack() {
      uni.navigateBack();
    }
  }
}
</script>