Vue3中如何进行路由传参及接收参数

最新推荐文章于 2025-04-08 18:12:37 发布

Hello-Mr.Wang

最新推荐文章于 2025-04-08 18:12:37 发布

阅读量3.4k

点赞数 6

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/jsbbhx/article/details/135654847

版权

本文介绍了在Vue.js应用中如何使用query参数传递单个字符串和复杂对象数据，包括使用`JSON.stringify`和`JSON.parse`进行序列化与反序列化的示例，以及在组件中接收和处理这些数据的方法。

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

1.query传参

1）传递单数据(字符串）

1-1

const edit = (row: any) => {
	router.push({
		path: "/system/role/edit",
		query: {
			_id: row._id,
		},
	});
};

1-2在路径/system/role/edit组件中接收

<script lang="ts" setup>
import { useRoute } from "vue-router";
const route = useRoute();

onMounted(() => {
	console.log(route.query._id);
});
</script>

2）复杂数据(对象)

2-1

const edit = (row: any) => {
	const params = JSON.stringify(row);//将JSON对象转换为字符串类型
	router.push({
		path: "/system/role/edit",
		query: {
			params,
			_id: row._id,
		},
	});
};

2-2 接收

onMounted(() => {
	let params = route.query.params;
	if (Array.isArray(params)) {
		params = params[0]; // 如果是数组，则取第一个元素
	}
	const row = JSON.parse(String(params));//最后在转为JSON对象格式
	console.log(row);
});