vue项目中如何利用查询实现传参 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有关vue项目中如何利用查询实现传参,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>查询方式传参和接收参数

传参:美元路由器。推动({路径:& # 39;/xxx # 39;查询:{id: id}})美元。路由器。推动传参时,并不会引起页面刷新。需要重新请求数据,代码如下。

& lt; div> shopName: {{shop.shopName}} & lt;/div> 　　出口默认{ 　　数据(){ 　　返回{ 　　商店:{shopName:“shopName"}, 　　shopNo:“123”; 　　}；　　}, 　　安装(){//初始时加载店铺数据　　this.loadShop (); 　　}, 　　看:{//shopNo改变时重新加载　　shopNo:函数(newShopNo) { 　　this.loadShop (); 　　} 　　}, 　　方法:{ 　　loadShop () {//调用API获取店数据　　var店={/*获取到的数据*/}; 　　this.shop=商店; 　　} 　　} 　　}

接收参数:route.query美元。id

params方式传参和接收参数

参数传参路由界面:路由器。js:路由设置这里,当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用查询方法,就没有这种限制,直接在跳转里面用就可以

& lt; el-table-column 　　标签=安僮鳌氨? 　　& lt;模板slot-scope=皊cope"祝辞　　& lt; el-button大?癿ini"类型=皃rimary"@click=癵oList (scope.row.id)“在个人信息表& lt;/el-button> 　　& lt;/template> 　　& lt;/el-table-column>

。直接占位符的方式

goList (id) { 　　router.push美元。({路径:/$ {id} '}) 　　}

需要对应路由配置如下:

 {
　　路径:& # 39;/线/:id # 39;
　　名称:& # 39;行# 39;
　　组件:行
　　}

二,通过路由属性中的名字来确定匹配的路由,通过参数来传递参数

goList (id) { 　　美元。路由器。推动({名称:“line"参数:{orderId: id}}) 　　}

对应路由配置如下:

 {
　　路径:& # 39;/线# 39;
　　名称:& # 39;行# 39;
　　组件:行
　　}

三,通过路径来匹配路由,然后通过查询来传递参数,传递的参数会暴露在地址栏中

goList (id) { 　　美元。路由器。推动({路径:& # 39;/线# 39;,查询:{orderId: id}}) 　　}

以上就是vue项目中如何利用查询实现传参,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。