uniapp中vue3页面传参、传值方法

最新推荐文章于 2025-06-18 10:33:34 发布

hqz1874

最新推荐文章于 2025-06-18 10:33:34 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： uni-app javascript 前端

本文链接：https://blog.youkuaiyun.com/hqz1874/article/details/134467761

文章介绍了在uni-app开发中，如何在Vue3环境下使用`uni.navigateTo`进行页面跳转的基本用法，以及如何通过引入Vue3特性处理`onLoad`的替代方法。还展示了进阶用法，如使用`click`事件和动态参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本用法：

A页面

uni.navigateTo({
		url: `/pages/test/test?id=001`
	});

B页面

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	onLoad((e) => {
		console.log(e)
	});
</script>

解决思路：

vue3中没有onload所以通过uniapp引入

进阶用法：

A页面

<template>
	<view @click="toPageB（e）">
	</view>
</template>

<script setup>
const toPageB = (e)=>{
	uni.navigateTo({
		url: `/pages/test/test?_id=${e}`
	});
}
</script>

B页面

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref , onMounted ,} from 'vue';
	onLoad((e) => {
		console.log(e)
	});
</script>