vue路由传参在element ui表格点击查看跳转的时候把该条数据的id传过去
时间: 2024-02-23 22:58:58 浏览: 119
vue 列表页跳转详情页获取id以及详情页通过id获取数据
5星 · 资源好评率100%
可以通过router.push的第二个参数传递参数,具体实现如下:
1. 在表格中加入点击事件,获取该行数据的id:
```html
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleView(scope.row.id)">查看</el-button>
</template>
</el-table-column>
```
```javascript
methods: {
handleView(id) {
this.$router.push({ path: '/detail', query: { id }})
}
}
```
2. 在路由跳转时将id作为参数传递:
```javascript
{
path: '/detail',
component: Detail,
props: (route) => ({ id: route.query.id })
}
```
3. 在接收组件(例如Detail组件)中通过props接收参数:
```javascript
props: ['id'],
```
这样就可以在跳转到详情页时将该条数据的id传递过去了。
阅读全文