VUE3 跳转传参及接收参数的方式

最新推荐文章于 2024-08-17 08:30:12 发布

lynachen

最新推荐文章于 2024-08-17 08:30:12 发布

阅读量6k

点赞数 2

文章标签： javascript vue.js 前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Julylyna/article/details/123248630

版权

本文介绍了在前端开发中，如何通过query和params两种方式在路由间传递参数。使用query方式时，参数显示在URL上，适合不敏感信息；params方式下，参数不会显示在URL，适用于内部传递。在接收参数时，query参数通过$route.query访问，params参数则通过$route.params获取。

摘要由CSDN通过智能技术生成

1.通过query传参：

            // 传参   			
            const handleJump = (id) => {
				router.push({
					path: '/xxx',  //router里的路由配置
					query: {
						id: id
					}
				})
			}
 
            // 参数接收
			onMounted(() => {
				console.log("获取到的参数", proxy.$route.query.id);
			})

2.通过params传参

            // 传参   			
            const handleJump = (id) => {
				router.push({
					name: 'xxx',  //router里的路由配置
					params: {
						id: id
					}
				})
			}
 
            // 参数接收
			onMounted(() => {
				console.log("获取到的参数", proxy.$route.params.id);
			})