Technology Sharing

Vuetify3 Nuxt3: Jump to details

2024-07-12

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

In Nuxt 3, usev-data-tableWhen we use a component, we want to redirect the page when we click a row or a cell. We can listen to the click event of the component and useuseRouterTo jump to the page.

  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>

In this example, when any row of the table is clicked,handleRowClickThe function will be called and useuseRouterofpushmethod to jump to a new page, the path of which is dynamically generated by the user ID. You need to ensure that each user ID is unique in order to correctly jump to the corresponding detail page