Vue中this.$router.push传参方式有哪些

·  阅读 614

博主相关个人技术博客、微信公众号、视频号、设计作品集


1.params传参:

var id = this.tableDate[index].id;

this.$router.push({name:'testResult',params:{id:id}});

//目标页面接受参数
let id = this.$route.params.id
复制代码

路由动态传参:

//路由
{
  path: '/pay/:sellerId',
  component: alliance,
  meta: { title: '向商户付款',wechat_auth: true, alipay_auth: true }
}

//获取
this.sellerId = this.$route.params.sellerId;
复制代码

2.query传参:

//也可传数组、对象
this.$router.push({
    path:'/testResult',
    query:{
        sellerId: sellerId,
        code: code,
        payTool: payTool,
        allianceData: this.allianceData //对象
    }
});

//目标页面接受参数
this.sellerId= this.$route.query.sellerId;
this.code= this.$route.query.code;
this.payTool= this.$route.query.payTool;
this.allianceData = this.$route.query.allianceData;
复制代码

小结:

query传参的参数会带在url后边展示在地址栏 (/page2?sellerId=xx&code=xxx&payTool=xxx)

params传参的参数不会展示到地址栏


微信公众号: 情非得已小猿猿(FrontendApe)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改