Vue路由动态传参的三种方式

现有如下场景：点击列表中的某一个单元格跳转到对应列表的详情页，并携带参数，便于详情页获取数据

<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>

在生命周期函数methods中使用：

一、

goList(id){

  this.$router.push({path:`/line/${id}`})

}

需要对应路由配置如下：

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

在列表详情页可通过this.$route.params.id来获取传递过来的参数

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

goList(id){

     this.$router.push({ name:"line",params:{ orderId:id }})

}

对应路由配置如下：

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

在列表详情页通过this.$route.params.orderId来获取传递过来的参数

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

goList(id){

    this.$router.push({ path: '/line',query: { orderId:id }})

}

对应路由配置同二

在列表详情页通过this.$route.query.orderId来获取传递过来的参数

参考文章：https://segmentfault.com/a/1190000012393587