Vuetify3 + Nuxt3：跳转详情

kingbal2024-07-15 14:21

在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函数会被调用，并且使用useRouter的push方法来跳转到一个新的页面，这个页面的路径是通过用户ID动态生成的。你需要确保每个用户的ID是唯一的，以便正确地跳转到相应的详情页面