vue三种动态传参的方式

人间城-

于 2020-07-17 21:15:44 发布

阅读量1.2k

点赞数

文章标签： vue javascript vue.js es6

本文链接：https://blog.youkuaiyun.com/weixin_45684556/article/details/107417854

版权

本文介绍了Vue中动态传参的三种常见方式：1) 直接使用占位符；2) 通过路由name匹配并利用params传递参数；3) 利用path匹配路由，借助query传递参数，注意这种方式的参数会显示在地址栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下场景：
<el-table-column
       label="操作">
       <template slot-scope="scope">
           <el-button size="mini" type="primary" @click="goList(scope.row.id)">个人信息表</el-button>
       </template>
 </el-table-column>

1.直接占位符的方式


goList(id){
 
  this.$router.push({path:`/line/${id}`})
 
}
需要对应路由配置如下：

     {
       path:'/line/:id',
       name:'line',
       component:line
     }

二、通过路由属性中的name来确定匹配的路由，通过params来传递参数

goList(id){
 
     this.$router.push({ name:"line",params:{ orderId:id }})
 
}
对应路由配置如下：

 {
      path:'/line',
      name:'line',
      component:line
}

三、通过 path来匹配路由，然后通过query来传递参数，传递的参数会暴露在地址栏中

goList(id){
 
    this.$router.push({ path: '/line',query: { orderId:id }})
}
对应路由配置同二