【最全】uni-app 页面跳转及参数传递

**uni-app 页面跳转及参数传递**

在uni-app开发中，页面跳转是非常常见的需求。然而，在实际开发过程中，我们经常会遇到一些问题，如如何传递参数、如何处理返回值等。在本文中，我们将详细介绍uni-app页面跳转及参数传递的相关知识。

### 一、页面跳转在uni-app中，页面跳转可以通过`uni.navigateTo()`或`uni.redirectTo()`方法实现。其中，`uni.navigateTo()`用于跳转到一个新的页面，而`uni.redirectTo()`则用于跳转到一个新的页面并关闭当前页面。

####1. uni.navigateTo()

javascript// 跳转到一个新的页面uni.navigateTo({
 url: '/pages/index'
})

####2. uni.redirectTo()

javascript// 跳转到一个新的页面并关闭当前页面uni.redirectTo({
 url: '/pages/index'
})

### 二、参数传递在uni-app中，参数传递可以通过`uni.navigateTo()`或`uni.redirectTo()`方法的`query`选项实现。其中，`query`选项用于传递一个对象作为参数。

####1. uni.navigateTo()

javascript// 跳转到一个新的页面并传递参数uni.navigateTo({
 url: '/pages/index',
 query: {
 id:123,
 name: 'John'
 }
})

####2. uni.redirectTo()

javascript// 跳转到一个新的页面并传递参数，并关闭当前页面uni.redirectTo({
 url: '/pages/index',
 query: {
 id:123,
 name: 'John'
 }
})

### 三、获取参数在uni-app中，获取参数可以通过`$root.$options.query`或`this.$options.query`实现。

####1. $root.$options.query

javascript// 获取传递的参数console.log($root.$options.query.id) // 输出:123console.log($root.$options.query.name) // 输出: John

####2. this.$options.query

javascript// 获取传递的参数console.log(this.$options.query.id) // 输出:123console.log(this.$options.query.name) // 输出: John

### 四、返回值处理在uni-app中，返回值处理可以通过`uni.navigateBack()`方法实现。其中，`uni.navigateBack()`用于返回到上一个页面。

####1. uni.navigateBack()

javascript// 返回到上一个页面uni.navigateBack({
 delta:1 // 返回到上一个页面})

### 五、示例代码以下是完整的示例代码：

javascript// pages/index.jsPage({
 data: {
 id: '',
 name: ''
 },
 onLoad(options) {
 this.setData({
 id: options.id,
 name: options.name })
 }
})

javascript// pages/detail.jsPage({
 data: {
 id: '',
 name: ''
 },
 onShow() {
 console.log(this.$options.query.id)
 console.log(this.$options.query.name)
 }
})

javascript// pages/index.jsPage({
 data: {
 id: '',
 name: ''
 },
 onTap() {
 uni.navigateTo({
 url: '/pages/detail',
 query: {
 id: this.data.id,
 name: this.data.name }
 })
 }
})

以上就是uni-app页面跳转及参数传递的相关知识。通过本文，希望你能够更好地理解和掌握这些知识，并在实际开发中灵活应用。