ant design pro Vue 页面传接参数

最新推荐文章于 2024-01-19 15:06:56 发布

愤世大魔头

最新推荐文章于 2024-01-19 15:06:56 发布

阅读量1.3k

点赞数

分类专栏： Ant design pro Vue 文章标签： vue传参 vue传接参数

本文链接：https://blog.csdn.net/ldr1109/article/details/116998410

版权

Ant design pro Vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

最近在用 ant design pro Vue，发现连传参都是问题，之前完全没有接触过vue，搞了半天，这里做下记录！

list.vue - 传递参数
----------------------
<div class="card-meta" @click="toDetailDoctor(item.Id)">
</div>
<script>
toDetailDoctor (Id) {
   console.log(Id)
   this.$router.push({ path: '/doctor/doctorDetail', query: { doctorId: Id } })
},
</script>

detail.vue - 接收参数
----------------------
<script>
created () {
   const rqtParams = { }
   rqtParams.doctorId = this.$route.query.doctorId
   jobDefault(rqtParams)
     .then((res) => this.loginSuccess(res))
     .catch(err => this.requestFailed(err))
}
</script>

总结：
一、传递参数会拼接在路由后面，出现在地址栏
传递参数  -- this.$router.push({path: ' 路由 ', query: {key: value}})
参数取值  -- this.$route.query.key
 
二、参数不会拼接在路由后面，地址栏上看不到参数
传递参数  -- this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值  -- this.$route.params.key
动态路由也是传递params的，this.$router.push() 方法中path不能和params一起使用，否则params将无效。