Vuetify3 + Nuxt3:跳转详情

在Nuxt 3中,使用v-data-table组件时,我们想要在点击某个行或者某个单元格时进行页面跳转。可以通过监听组件的点击事件,并使用useRouter来实现页面跳转。

复制代码
<template>
  <v-data-table
    :headers="headers"
    :items="items"
    @click:row="handleRowClick"
  ></v-data-table>
</template>
 
<script setup>
import { useRouter } from 'vue-router';
 
const router = useRouter();
 
const headers = [
  { text: 'Name', value: 'name' },
  { text: 'Age', value: 'age' },
  // ... 
];
 
const items = [
  { name: 'John Doe1', age: 30, id: 1 },
  { name: 'Jane Smith2', age: 25, id: 2 },
  // ... 
];
 
// 处理行点击事件
function handleRowClick(item) {
  // 使用item.id或其他标识符来确定要跳转到的具体页面
  router.push(`/user/${item.id}`);
}
</script>

在这个例子中,当点击表格的任何一行时,handleRowClick函数会被调用,并且使用useRouterpush方法来跳转到一个新的页面,这个页面的路径是通过用户ID动态生成的。你需要确保每个用户的ID是唯一的,以便正确地跳转到相应的详情页面

相关推荐
月伤594 分钟前
Element Plus 表格表单校验功能详解
前端·javascript·vue.js
BUG收容所所长5 分钟前
JavaScript并发控制:如何优雅地管理异步任务执行?
前端·javascript·面试
非优秀程序员6 分钟前
46个Nano-banana 精选提示词,持续更新中
前端
Mintopia8 分钟前
Next 全栈数据缓存(Redis)从入门到“上瘾”:让你的应用快到飞起 🚀
前端·javascript·next.js
chxii8 分钟前
7.5el-tree 组件详解
前端·javascript·vue.js
Mintopia8 分钟前
每个国家的核安全是怎么保证的,都不怕在自己的领土爆炸吗?
前端·后端·面试
BUG收容所所长11 分钟前
大文件上传的终极指南:如何优雅处理GB级文件传输?
前端·javascript·面试
前端开发小透明25 分钟前
前端国际化深度解析:i18n、l10n 与 g11n 的实践指南
前端
Chosen_126 分钟前
JS-OOP篇
前端·javascript
Mintopia29 分钟前
AIGC中的“幻觉”问题:技术成因与解决思路
前端·javascript·aigc