v-for里面el-link要根据id跳转不同的路径怎么办
时间: 2023-05-19 10:02:32 浏览: 46
您可以在el-link的to属性中使用动态绑定,将id作为参数传递给路由,然后在路由中根据id匹配相应的路径。例如:
<el-link :to="{path: '/detail/' + id}">详情</el-link>
在路由中,可以使用动态路由来匹配路径:
{
path: '/detail/:id',
component: Detail
}
然后在Detail组件中,可以通过this.$route.params.id来获取id参数,进而根据id获取相应的数据。
相关问题
el-menu-item组件中怎么实现router-link路由跳转
如果你想在 `el-menu-item` 组件中使用 `router-link` 实现路由跳转,可以通过在 `el-menu-item` 标签上添加 `router-link` 组件来实现。下面是一个示例代码:
```html
<el-menu-item index="1">
<router-link to="/home">Home</router-link>
</el-menu-item>
```
在这个示例中,我们在 `el-menu-item` 组件中嵌套了一个 `router-link` 组件,并将其目标路由设置为 `/home`。这样当用户点击菜单项时,就会跳转到 `/home` 路由。
如果你需要在路由跳转时传递参数,可以将参数作为 `to` 属性的查询字符串传递,例如:
```html
<el-menu-item index="2">
<router-link :to="{ path: '/user', query: { id: 123 } }">User</router-link>
</el-menu-item>
```
在这个示例中,我们将 `id` 参数的值设置为 `123`,并将其作为查询字符串传递给目标路由 `/user`。
需要注意的是,为了使用 `router-link` 组件,你需要先在 Vue.js 应用程序中引入并配置路由。如果你还没有配置路由,可以参考 Vue.js 官方文档中的路由部分进行配置。
el-table-column点击单元格跳转
根据提供的两个引用,el-table-column点击单元格跳转的实现方式如下:
1. 点击单元格跳转到新页面
```html
<el-table :data="allData">
<el-table-column prop="tel" label="联系电话" align="center">
<template slot-scope="scope">
<div>
<a href="javascript:;" @click="goEnviro">{{scope.row.tel}}</a>
</div>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
allData: [
{ name: "", classify: "", tel: "", update: "", fileType: "", },
]
}
},
methods: {
goEnviro() {
this.$router.push('/filetext/findfile')
}
}
}
</script>
```
2. 点击单元格跳转到新页面并传递参数
```html
<el-table ref="dataTable" :data="userList">
<el-table-column prop="username" label="用户账号">
<template slot-scope="scope">
<el-link type="success" v-on:click="cellclick(scope.row)">{{scope.row.username}}</el-link>
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
userList: []
}
},
methods: {
cellclick(row) {
this.$router.push({
path: '/user/detail',
query: {
id: row.id
}
})
}
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)