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来获取传递过来的参数