Vue路由怎么传参

一、params传参

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

//这个组件对应的路由配置 
{  
	//组件路径 
	path: '/admin',  
	//组件别名 
	name: 'admin',  
	//组件名 
	component: Admin, 
} 

通过params传递参数,如果我们想获取 id 的参数值,可以通过this.$route.params.id这种方式来打印出来就可以得到了;

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

二、路由属性配置传参:

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


//这个组件对应的路由配置 
{   
	//组件路径 
	path: '/admin:id',   
	//组件别名 
	name: 'admin',   
	//组件名 
	component: Admin, 
}

通过路由属性配置传参我们可以用this.$route.params.id来获取到 id 的值,

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

三、query传参

this.$router.push({ 
	name:"/admin",     
	query:{id:item.id} 
}) 


//这个组件对应的路由配置 
{   
	//组件路径 
	path: '/admin',   
	//组件别名 
	name: 'admin',   
	//组件名 
	component: Admin, 
}

这种方式是可以解决页面刷新参数消失问题的,这种方式可以理解为是 ajax 中的 get 方法,参数是直接在 url 后面添加的,参数是可见的,所以解决页面刷新参数消失问题建议使用此方法来解决;

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论