informasi kontak saya
Surat[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Di Nuxt 3, gunakanv-data-table
komponen, kita ingin melompat ke halaman ketika baris atau sel tertentu diklik.Anda dapat mendengarkan acara klik komponen dan menggunakannyauseRouter
Untuk mencapai lompatan halaman.
- <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>
Dalam contoh ini, ketika baris mana pun pada tabel diklik,handleRowClick
Fungsi tersebut akan dipanggil dan digunakanuseRouter
daripush
Metode untuk melompat ke halaman baru, jalur ke halaman ini dihasilkan secara dinamis oleh ID pengguna.Anda perlu memastikan bahwa setiap ID pengguna unik agar dapat melompat ke halaman detail terkait dengan benar