element ui 把从server页面获取的id值传到detail页面的变量serverId中并在表格中显示
时间: 2024-05-14 12:18:37 浏览: 19
假设你从 server 页面获取到了一个 id 值,可以在路由中设置参数传递给 detail 页面:
```
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Detail from '@/views/Detail.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
]
})
```
在 server 页面中,点击某个条目时,可以通过 `$router.push()` 方法跳转到 detail 页面,并传递 id 值:
```
// views/Server.vue
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<button @click="goToDetail(item.id)">Detail</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
}
},
methods: {
goToDetail(id) {
this.$router.push({ name: 'Detail', params: { id } })
}
}
}
</script>
```
在 detail 页面中,可以通过 `$route.params` 获取传递过来的 id 值,并将其赋值给一个变量,如 serverId:
```
// views/Detail.vue
<template>
<div>
<h1>Server Detail - {{ serverId }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
serverId: ''
}
},
mounted() {
this.serverId = this.$route.params.id
}
}
</script>
```
在表格中显示 serverId 的值,只需要将其绑定到表格中的某个字段即可。例如:
```
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ serverId }}</td>
<td>Server Name</td>
</tr>
</tbody>
</table>
```
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)