내 연락처 정보
우편메소피아@프로톤메일.com
2024-07-12
한어Русский язык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가 고유한지 확인해야 합니다.