uniapp在vue3如何接收页面跳转参数
时间: 2023-12-04 21:03:06 浏览: 95
在 Vue 3 中,使用 Uni-App 接收页面跳转参数的方式与 Vue 2 有所不同。以下是在 Uni-App 中接收页面跳转参数的方法:
1. 在目标页面的 `created` 钩子函数中使用 `uni.getLaunchOptionsSync` 方法获取页面跳转参数。示例代码如下:
```vue
<script>
export default {
created() {
const options = uni.getLaunchOptionsSync()
console.log(options.query) // 打印页面跳转参数
},
}
</script>
```
2. 使用 `onLoad` 或 `onShow` 生命周期钩子函数获取页面跳转参数。示例代码如下:
```vue
<script>
export default {
onLoad(options) {
console.log(options) // 打印页面跳转参数
},
}
</script>
```
在上述代码中,`options` 参数包含了页面跳转时传递的参数。你可以根据需要在相应的钩子函数中处理这些参数。
需要注意的是,以上方法适用于在非组件页面中接收参数。如果在组件中接收参数,可以通过父组件传递 props 的方式来获取参数。
希望以上信息对你有帮助!如果有任何疑问,请随时提问。
相关问题
uniapp vue3 页面跳转传值
在 UniApp 中,可以通过在页面跳转时使用 query 参数或者通过全局事件总线来传递数据。
1. 使用 query 参数传递数据:
在跳转页面时,可以在 URL 中添加 query 参数来传递数据,例如:
```javascript
uni.navigateTo({
url: '/pages/myPage/myPage?id=123&name=张三'
})
```
在接收页面中,可以使用 `this.$route.query` 来获取传递的参数,例如:
```javascript
export default {
mounted() {
console.log(this.$route.query.id) // 输出 123
console.log(this.$route.query.name) // 输出 张三
}
}
```
2. 使用全局事件总线传递数据:
UniApp 中可以使用 uni.$emit 和 uni.$on 来实现全局事件总线,例如:
在 A 页面中:
```javascript
uni.$emit('myEvent', {id: 123, name: '张三'})
uni.navigateTo({
url: '/pages/myPage/myPage'
})
```
在 B 页面中:
```javascript
export default {
mounted() {
uni.$on('myEvent', data => {
console.log(data.id) // 输出 123
console.log(data.name) // 输出 张三
})
}
}
```
使用全局事件总线时需要注意,如果不及时销毁事件监听,可能会导致内存泄漏。可以在生命周期函数中使用 uni.$off 方法销毁事件监听。
vue3uniapp路由跳转传递参数
在Vue3和uni-app中,可以使用$route对象来获取当前路由的信息,包括路由参数。可以通过在URL中添加参数的方式传递数据,然后在目标页面中通过$route.query获取传递过来的参数。
以下是一个示例代码,演示如何在uni-app中使用路由传递参数:
1.在源页面中,使用uni.navigateTo方法跳转到目标页面,并在URL中添加参数:
```javascript
uni.navigateTo({
url: '/pages/targetPage/targetPage?id=123&name=uni-app',
success: function(res) {
console.log('跳转成功');
}
});
```
2.在目标页面中,通过$route.query获取传递过来的参数:
```javascript
export default {
onLoad(options) {
console.log(options.id); // 输出:123
console.log(options.name); // 输出:uni-app
}
}
```