【vue2.0】vue-router路由传参

本文详细介绍了Vue Router中的两种参数传递方式:params和query。通过params实现动态路由,通过路径拼接的方式传递参数;而query则类似于传统的查询字符串方式。在组件内部,可以通过$route对象获取传递的参数。示例代码展示了如何在模板、路由配置和组件中使用这两种方法进行参数传递。

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

vue-router 路由传参
路由传参两种:params(/user/abc)、query(/user?id=abc

1、 params:以路由拼接方式(动态路由)

第一步:在路由跳转阶段拼接路径;(router-link与普通事件两种)
<router-link :to="'/user/'+userId" >
用户</router-link>
&&
this.$router.push('/user/'+this.userId)
---
第二种方式:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})
 第二步:路由配置中接受拼接;
{ 
	path:'/user/:id',
	name:User,
	component:User 
}
 第三步:组件内使用;
{{$route.params.id}}
&&
computed:{
	userId(){
		return this.$route.params.id
	}
}

2、 query:以传统query方式

第一步:在路由跳转阶段传递query对象;(两种)
<router-link :to="{ path:'/profile',query:{name:'zzz',age:12}}" >
档案</router-link>
&&
this.$router.push({ 
	path:'/profile',
	query:{name:'zzz',age:12}
})
第二步:路由配置中不需要特殊操作;
{ path:'/profile',name:Profile,component:Profile }
第三步:组件内使用;
<div>{{$route.query.name}}</div>
&&
computed:{
	userName(){
		return this.$route.query.name
	} 
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值