Khái niệm Cơ bản về Định tuyến

Một định tuyến (route) biểu diễn ánh xạ giữa đường dẫn và thành phần giao diện. Hệ thống định tuyến (router) quản lý các quy tắc ánh xạ này. Trong ứng dụng frontend, khóa là đường dẫn URL, giá trị là thành phần Vue tương ứng.

Phân loại Định tuyến

• Định tuyến phía máy chủ: Xử lý yêu cầu qua hàm logic, trả về dữ liệu từ server
• Định tuyến phía client: Thay đổi giao diện dựa trên đường dẫn URL mà không tải lại trang

Cài đặt và Cấu hình Cơ bản

1. Cài đặt thư viện: npm install vue-router@4
2. Khởi tạo bộ định tuyến:

import { createRouter, createWebHistory } from 'vue-router'
import GioiThieu from '@/views/GioiThieu.vue'
import TrangChu from '@/views/TrangChu.vue'

const boDinhTuyen = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/gioi-thieu', component: GioiThieu },
    { path: '/trang-chu', component: TrangChu }
  ]
})

export default boDinhTuyen

3. Sử dụng trong ứng dụng chính:

<router-view />
<router-link to="/gioi-thieu" active-class="active">Giới Thiệu</router-link>

Định tuyến Lồng Nhau

routes: [
  {
    path: '/trang-chu',
    component: TrangChu,
    children: [
      { path: 'tin-tuc', component: TinTuc },
      { path: 'thong-bao', component: ThongBao }
    ]
  }
]

Liên kết điều hướng cần đường dẫn đầy đủ: <router-link to="/trang-chu/tin-tuc">

Truyền Tham số

Tham số Query

<router-link :to="{ 
  path: '/chi-tiet', 
  query: { ma: '123', ten: 'Sản phẩm' }
}">

Truy cập qua $route.query.ma

Tham số Đường dẫn

routes: [
  { path: '/san-pham/:id/:ten', component: ChiTiet }
]

<router-link :to="{ 
  name: 'san-pham', 
  params: { id: '456', ten: 'Mới' }
}">

Truy cập qua $route.params.id. Lưu ý: Khi dùng params phải định danh route bằng name

Tối ưu Truyền Tham số

props: route => ({
  maSanPham: route.params.id,
  tenSanPham: route.query.ten
})

Thành phần nhận tham số qua props như component thông thường

Quản lý Lịch sử Điều hướng

• replace trên router-link thay thế lịch sử thay vì thêm mới
• API lập trình:

this.$router.push({ name: 'san-pham', params: { id: 789 } })
this.$router.replace(...)
this.$router.go(-1) // Quay lại

Tối ưu Hiệu năng

<keep-alive>
  <router-view :include="['TinTuc', 'ThongBao']" />
</keep-alive>

Sử dụng activated và deactivated để quản lý trạng thái thành phần

Bảo mật Định tuyến

router.beforeEach((to, from) => {
  if (to.meta.baoMat && !kiemTraQuyen()) {
    return { path: '/dang-nhap' }
  }
})

Phân loại bảo vệ:

• Toàn cục: Áp dụng cho mọi route
• Cấp thành phần: Sử dụng beforeRouteEnter
• Riêng lẻ: Định nghĩa trực tiếp trong cấu hình route

Chế độ Điều hướng

• Hash mode: Sử dụng # trong URL, tương thích tốt nhưng URL không đẹp
• History mode: URL sạch hơn, yêu cầu cấu hình server xử lý 404 khi tải trực tiếp