栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

Vue知识点:Router参数传递

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Vue知识点:Router参数传递

直接在url后面加上参数名:
- 路由Router的设置
	{
		path:'/detail/:id',    //注意这个位置,参数写在后头
		component:Detail
	}
-  传递使用
	//方法一:
	goodsClick(id){
	   this.$router.push('/detail/'+id)  //传递的时候,记得加上变量
	}
	//方法二:
	goodsClick(id){
	   this.$router.push({
	      path:'/detail/'+id
	   })
	}
-  获取参数
	

用name属性进行传值:
- 路由Router的设置
	{
		path:'/detail',
	    name:'Detail',      //运用这个name属性进行跳转
		component:Detail
	}
-  传递使用
	goodsClick(id){
	    this.$router.push({
	       name:'Detail',       //用name进行跳转
	       params:{             //params属性传递参数
	         id
	       }
	    })
	}
-  获取参数
	

用path属性进行传值:
- 路由Router的设置
	{
		path:'/detail',   //运用这个path属性进行跳转 
		component:Detail
	}
- 路由Router的设置
	goodsClick(id){
	    this.$router.push({
	       path:'/detail',        //path进行跳转
	       query:{               //query传递参数
	          id
	       }
	    })
	}
-  获取参数
	

总结:

提示:三种方法的区别

- 直接在url后面传值,用 $route.params 获取参数值
- 参数在url后面显示,例: localhost:8080/detail/1lyp2vg ,直接跟着  
-------------------------------------------------------------------------------------
- 用name,params进行传参,用 $route.params 获取参数值
- 参数在url后面不显示,例:localhost:8080/detail,
- 注:这种方法在刷新页面的时候,传递的值会丢失;
-------------------------------------------------------------------------------------
- 用path,query进行传参,用$route.query获取参数值
- 参数在url后面显示,例: localhost:8080/detail?id=1m7jj7a   ?后key=value模式跟着
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1000082.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号