在邮件中点击一个链接,通过url免登陆路由跳转到名为reviewDetails的页面,并且同时查询id和userName,页面上有一个vxe-table表格,只显示相对应的那一条数据
时间: 2024-03-13 12:44:21 浏览: 54
好的,你的问题是如何通过 URL 免登陆路由跳转到名为 reviewDetails 的页面,并且同时查询 id 和 userName,然后在页面上只显示相对应的那一条数据。
首先,你需要在路由中定义一个名为 reviewDetails 的路由,该路由应该接受两个参数,分别是 id 和 userName。如下所示:
```
{
path: '/reviewDetails/:id/:userName',
name: 'reviewDetails',
component: ReviewDetails
}
```
接下来,在 ReviewDetails 组件中,你可以通过 $route 对象来获取 id 和 userName 的值,然后使用这两个值来查询相应的数据。查询数据的方式可以根据实际情况来确定,可以是从后端接口获取数据,也可以是从本地存储中获取数据。查询完成后,你需要将数据传递给一个名为 data 的变量,这个变量将会绑定到 vxe-table 表格组件上。如下所示:
```
<template>
<div>
<vxe-table :data="data"></vxe-table>
</div>
</template>
<script>
export default {
data() {
return {
data: []
}
},
mounted() {
const id = this.$route.params.id
const userName = this.$route.params.userName
// TODO: 查询数据
this.data = // 查询到的数据
}
}
</script>
```
最后,在邮件中的链接中添加 id 和 userName 的参数,如下所示:
```
<a href="/reviewDetails/123/john">点击查看详情</a>
```
这样,当用户点击链接时,就会跳转到 reviewDetails 页面,并且同时查询 id 为 123,userName 为 john 的数据,并在页面上只显示相对应的那一条数据。
阅读全文