기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

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가 고유한지 확인해야 합니다.