Κοινή χρήση τεχνολογίας

Vuetify3 Nuxt3: Μετάβαση στις λεπτομέρειες

2024-07-12

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

Στο Nuxt 3, χρησιμοποιήστεv-data-table στοιχείο, θέλουμε να μεταβούμε στη σελίδα όταν γίνεται κλικ σε μια συγκεκριμένη γραμμή ή κελί.Μπορείτε να ακούσετε το συμβάν κλικ του στοιχείου και να το χρησιμοποιήσετεuseRouterγια να επιτευχθεί άλμα σελίδας.

  1. <template>
  2. <v-data-table
  3. :headers="headers"
  4. :items="items"
  5. @click:row="handleRowClick"
  6. ></v-data-table>
  7. </template>
  8. <script setup>
  9. import { useRouter } from 'vue-router';
  10. const router = useRouter();
  11. const headers = [
  12. { text: 'Name', value: 'name' },
  13. { text: 'Age', value: 'age' },
  14. // ...
  15. ];
  16. const items = [
  17. { name: 'John Doe1', age: 30, id: 1 },
  18. { name: 'Jane Smith2', age: 25, id: 2 },
  19. // ...
  20. ];
  21. // 处理行点击事件
  22. function handleRowClick(item) {
  23. // 使用item.id或其他标识符来确定要跳转到的具体页面
  24. router.push(`/user/${item.id}`);
  25. }
  26. </script>

Σε αυτό το παράδειγμα, όταν γίνεται κλικ σε οποιαδήποτε γραμμή του πίνακα,handleRowClickΗ συνάρτηση θα κληθεί και θα χρησιμοποιηθείuseRouterτουpush Μέθοδος μετάβασης σε νέα σελίδα, η διαδρομή προς αυτήν τη σελίδα δημιουργείται δυναμικά από το αναγνωριστικό χρήστη.Πρέπει να βεβαιωθείτε ότι το αναγνωριστικό κάθε χρήστη είναι μοναδικό, προκειμένου να μεταβείτε σωστά στην αντίστοιχη σελίδα λεπτομερειών.