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