Hệ thống File-based Routing trong Nuxt

Một trong những điểm mạnh của Nuxt.js là hệ thống file-based routing tự động. Điều này có nghĩa là bạn không cần phải cấu hình thủ công các route như trong các framework khác. Mỗi file .vue trong thư mục pages/ của bạn sẽ tự động trở thành một route, và Nuxt sẽ tự động tạo các URL dựa trên cấu trúc thư mục. Trong bài học này, chúng ta sẽ tìm hiểu cách Nuxt tự động tạo route từ cấu trúc file, quy tắc đặt tên và cách tùy chỉnh routing với definePageMeta.

Mục tiêu bài học

• Hiểu rõ cách Nuxt tự động tạo route từ thư mục pages/
• Nắm vững quy tắc đặt tên file và thư mục cho routing
• Tạo và quản lý các route cơ bản
• Sử dụng khả năng nested routes để tạo URL động
• Tùy chỉnh route với definePageMeta

Hệ thống File-based Routing

1. Giới thiệu cơ chế tự động tạo route từ thư mục pages/

Trong Nuxt, bạn không cần phải khai báo các route thủ công như trong các framework khác. Mỗi file .vue trong thư mục pages/ sẽ tự động trở thành một route và được ánh xạ thành một URL tương ứng.

• pages/index.vue: Tương ứng với route /
• pages/about.vue: Tương ứng với route /about
• pages/contact.vue: Tương ứng với route /contact

Nuxt sử dụng file-based routing, vì vậy bạn chỉ cần tạo các file và thư mục trong pages/, Nuxt sẽ tự động xử lý việc tạo route.

2. Quy tắc đặt tên file và thư mục

Để Nuxt tự động tạo route đúng như mong muốn, bạn cần tuân thủ một số quy tắc đặt tên file và thư mục sau:

• Tên file: File .vue trong thư mục pages/ sẽ tạo ra route có tên giống như tên file (ví dụ: index.vue → route /, about.vue → route /about).

• Nested routes: Để tạo các route lồng nhau, bạn chỉ cần tạo thư mục con trong pages/:

  • pages/blog/index.vue → /blog
  • pages/blog/[slug].vue → /blog/:slug

• Dynamic routes: Để tạo route động, bạn chỉ cần đặt tên file với dấu ngoặc vuông [param].vue:

  • pages/blog/[slug].vue → /blog/:slug

• Catch-all routes: Nếu bạn muốn một route có thể bao trùm nhiều giá trị khác nhau, bạn có thể dùng dấu ba chấm [...]:

  • pages/[...slug].vue → /:slug* sẽ bắt tất cả các tham số động.

3. Tạo các route cơ bản

Bây giờ, chúng ta sẽ tạo một vài route cơ bản để thấy rõ cách hoạt động của hệ thống routing:

Tạo các file trong thư mục pages/:

• pages/index.vue (Route /):

  <template>
    <div>
      <h1>Trang chủ</h1>
      <p>Chào mừng đến với trang chủ của bạn!</p>
    </div>
  </template>
  

• pages/about.vue (Route /about):

  <template>
    <div>
      <h1>Giới thiệu</h1>
      <p>Đây là trang giới thiệu về dự án của bạn.</p>
    </div>
  </template>
  

• pages/contact.vue (Route /contact):

  <template>
    <div>
      <h1>Liên hệ</h1>
      <p>Hãy liên hệ với chúng tôi qua trang này!</p>
    </div>
  </template>
  

Khi chạy npm run dev, bạn sẽ có 3 route cơ bản là /, /about, và /contact.

4. Tự động tạo nested URL dựa trên cấu trúc folder

Để tạo nested route, bạn chỉ cần tạo thư mục con trong pages/. Ví dụ, nếu bạn muốn tạo một route blog với các bài viết chi tiết, bạn có thể tạo cấu trúc như sau:

• pages/blog/index.vue (Route /blog):

  <template>
    <div>
      <h1>Blog</h1>
      <p>Danh sách các bài viết trong blog.</p>
    </div>
  </template>
  

• pages/blog/[slug].vue (Route /blog/:slug):

  <template>
    <div>
      <h1>Bài viết: {{ route.params.slug }}</h1>
      <p>Đây là bài viết chi tiết về {{ route.params.slug }}.</p>
    </div>
  </template>
  

Khi truy cập /blog/first-post, Nuxt sẽ tự động hiển thị bài viết với slug first-post.

5. Tùy chỉnh route bằng definePageMeta

Bạn có thể tùy chỉnh một số meta dữ liệu cho mỗi route bằng cách sử dụng definePageMeta. Ví dụ, bạn có thể thêm các thông tin về SEO như title, description, v.v.

Ví dụ:

Trong pages/about.vue, bạn có thể thêm:

<script setup>
definePageMeta({
  title: 'Giới thiệu về chúng tôi',
  meta: [
    { name: 'description', content: 'Trang giới thiệu dự án của chúng tôi.' }
  ]
})
</script>

<template>
  <div>
    <h1>Giới thiệu</h1>
    <p>Đây là trang giới thiệu về dự án của bạn.</p>
  </div>
</template>

Điều này sẽ tự động cập nhật tiêu đề trang và meta description cho SEO khi người dùng truy cập route /about.

Kết luận

Trong bài học này, bạn đã nắm bắt được cách Nuxt sử dụng hệ thống file-based routing để tự động tạo các route từ thư mục pages/. Bạn cũng đã tìm hiểu các quy tắc đặt tên file và thư mục để dễ dàng tạo ra các route động và nested route. Ngoài ra, bạn đã học cách tùy chỉnh thông tin của mỗi route thông qua definePageMeta, giúp bạn cải thiện SEO và tối ưu trải nghiệm người dùng. Với kiến thức này, bạn có thể bắt đầu tổ chức các route cho dự án của mình một cách gọn gàng và dễ quản lý.