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

最新推荐文章于 2025-09-08 16:57:57 发布

原创最新推荐文章于 2025-09-08 16:57:57 发布 · 3.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

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

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);
});