当前位置：首页 > news >正文

[uniapp的页面传参]详细讲解uniapp中页面传参的传递方式和接受方式使用案例代码注释

news 来源：原创 2024/5/8 3:29:00

一、传递方式

1. URL传参

URL传参是一种比较简单的传递方式，它是通过URL地址来传递参数的。我们可以在URL地址后面加上参数，例如：

<uni-button @click="goToDetail">跳转到详情页</uni-button>//编程式传参  比较常用
<navigator url="/pages/detail/detail?id=123">跳转到详情页</navigator>//标签传参
// 跳转到详情页，并传递id参数
goToDetail() {uni.navigateTo({url: '/pages/detail/detail?id=123'})
}

在接收页面中，我们可以通过this.$route.query来获取传递的参数：

export default {onLoad() {console.log(this.$route.query.id) // 输出：123}
}

对于微信小程序 this.$ route.query.id 可能不能使用因为微信小程序不识别 this.$ route
而替代方案
不使用this.$ route 使用 onload传参

onLoad(getData) {//getData就是参数对象  兼用微信小程序console.log(getData.id);		
}

2. Storage传参

Storage传参是通过uni-app提供的Storage API来传递参数的。我们可以在跳转之前将参数存储到Storage中，然后在接收页面中获取：

<uni-button @click="goToDetail">跳转到详情页</uni-button>// 跳转到详情页，并将id参数存储到Storage中
goToDetail() {uni.setStorageSync('id', 123)uni.navigateTo({url: '/pages/detail/detail'})
}

在接收页面中，我们可以通过uni.getStorageSync来获取存储的参数：

export default {onLoad() {console.log(uni.getStorageSync('id')) // 输出：123}
}

3. Vuex传参

Vuex传参是通过uni-app提供的Vuex API来传递参数的。我们可以在跳转之前将参数存储到Vuex中，然后在接收页面中获取：

<uni-button @click="goToDetail">跳转到详情页</uni-button>// 跳转到详情页，并将id参数存储到Vuex中
goToDetail() {uni.$emit('setId', 123)uni.navigateTo({url: '/pages/detail/detail'})
}

在Vuex中，我们可以定义一个state来存储参数：

const store = new Vuex.Store({state: {id: ''},mutations: {setId(state, id) {state.id = id}}
})

在接收页面中，我们可以通过mapState来获取存储的参数：

import { mapState } from 'vuex'export default {computed: {...mapState(['id'])},onLoad() {console.log(this.id) // 输出：123}
}

4.api传参eventChannel

api传参是通过uni-app提供的API来传递参数的。我们可以在跳转之前将参数存储到options中，例如：

<uni-button @click="goToDetail">跳转到详情页</uni-button>// 跳转到详情页，并传递id参数
goToDetail() {uni.navigateTo({url: '/pages/detail/detail',success: (res) => {res.eventChannel.emit('acceptDataFromOpenerPage', { id: 123 })}})
}

在这个例子中，我们使用了eventChannel来传递参数。我们在跳转之前，通过success回调函数来获取eventChannel，然后通过emit方法来传递参数。

在api传参的方式中，我们可以通过uni.on来监听传递的参数：

export default {onLoad() {const eventChannel = this.getOpenerEventChannel()eventChannel.on('acceptDataFromOpenerPage', (data) => {console.log(data.id) // 输出：123})}
}

在这个例子中，我们通过getOpenerEventChannel方法来获取eventChannel，然后通过on方法来监听传递的参数。

二、接受方式

1. URL传参

在URL传参的方式中，我们可以通过this.$route.query来获取传递的参数：

export default {onLoad() {console.log(this.$route.query.id) // 输出：123}
}

2. Storage传参

在Storage传参的方式中，我们可以通过uni.getStorageSync来获取存储的参数：

export default {onLoad() {console.log(uni.getStorageSync('id')) // 输出：123}
}

3. Vuex传参

在Vuex传参的方式中，我们可以通过mapState来获取存储的参数：

import { mapState } from 'vuex'export default {computed: {...mapState(['id'])},onLoad() {console.log(this.id) // 输出：123}
}

4.api传参eventChannel

在api传参的方式中，我们可以通过uni.on来监听传递的参数：

export default {onLoad() {const eventChannel = this.getOpenerEventChannel()eventChannel.on('acceptDataFromOpenerPage', (data) => {console.log(data.id) // 输出：123})}
}

在这个例子中，我们通过getOpenerEventChannel方法来获取eventChannel，然后通过on方法来监听传递的参数。

三、使用案例

下面是一个完整的使用案例，包括传递和接收参数的方式：

// pages/index/index.vue
<template><view><uni-button @click="goToDetail">跳转到详情页</uni-button></view>
</template><script>
export default {methods: {goToDetail() {// URL传参// uni.navigateTo({//   url: '/pages/detail/detail?id=123'// })// Storage传参// uni.setStorageSync('id', 123)// uni.navigateTo({//   url: '/pages/detail/detail'// })// Vuex传参uni.$emit('setId', 123)uni.navigateTo({url: '/pages/detail/detail'})}}
}
</script>// pages/detail/detail.vue
<template><view><text>{{ id }}</text></view>
</template><script>
import { mapState } from 'vuex'export default {computed: {...mapState(['id'])},onLoad() {// URL传参// console.log(this.$route.query.id)// Storage传参// console.log(uni.getStorageSync('id'))// Vuex传参// console.log(this.id)}
}
</script>// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {id: ''},mutations: {setId(state, id) {state.id = id}}
})uni.$on('setId', id => {store.commit('setId', id)
})export default store