Vue中使用路由传参的常用三种方式示例演示

飞熊 • 2023年12月19日下午8:52 • Vue • 阅读 255

一、params传参

在路由定义中给每个路由设置一个唯一的名称，然后通过名称来传递参数。例如，定义一个带有命名路由的路由，
在组件中可以通过$router.push或的to属性来传递参数：

// 传递参数
this.$router.push({ 
	name:"admin",　　　　
	params:{id:item.id} //这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) 
}) 

// 路由定义
{　　
	//组件路径 
	path: '/admin',　　
	//组件别名 
	name: 'admin',　　
	//组件名 
	component: Admin, 
} 

// 接收参数
this.$route.params.id

注意：获取参数的时候是 $route，跳转和传参的时候是 $router

优点：参数通过路由名称传递，不依赖具体的URL；适合传递动态参数。
缺点：需要提前定义路由名称。
使用场景：传递动态参数，并且不依赖具体的URL。

二、路由属性配置传参：

在路由定义中使用动态路径参数来传递参数。例如，定义一个带有参数的路由：

// 传递参数
this.$router.push({
	name:"/admin/${item.id}", 
}) 

// 路由定义
{ 　　
	//组件路径 
	path: '/admin:id', 　　
	//组件别名 
	name: 'admin', 　　
	//组件名 
	component: Admin, 
}

// 接收参数
this.$route.params.id

注意 this. $router.push 方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应；

优点：参数直接嵌入在URL中，易于理解和传递；适合传递单个参数。
缺点：不适合传递多个参数；参数必须在路由定义中提前声明。
使用场景：传递单个参数，例如用户ID、商品ID等。

三、query传参

在URL中使用查询字符串来传递参数。例如，定义一个带有查询参数的路由：

// 传递参数
this.$router.push({ 
	name:"/admin",　　　　 
	query:{id：item.id} 
}) 

// 路由定义
{ 　　
	//组件路径 
	path: '/admin', 　　
	//组件别名 
	name: 'admin', 　　
	//组件名 
	component: Admin, 
}

// 接收参数
this.$route.query.id