Cấu hình Router & Nested Routes trong Vue.js

Vue Router giúp tạo ra các Single Page Application (SPA) với nhiều trang. Trong bài học này, bạn sẽ tìm hiểu:

• Cách cấu hình Vue Router với createRouter() và createWebHistory().
• Nested Routes – Cách xây dựng trang con trong Vue Router.
• Sử dụng <router-view> và <router-link> để điều hướng giữa các trang.
• Thực hành: Xây dựng ứng dụng có nhiều cấp độ điều hướng (trang chủ, danh mục, chi tiết sản phẩm).

Router & Nested Routes

1 Cấu hình Vue Router

Trước tiên, chúng ta cần cấu hình Vue Router để quản lý các tuyến đường trong ứng dụng Vue.js.

Bước 1: Cài đặt Vue Router

Nếu bạn chưa cài đặt Vue Router, hãy chạy lệnh sau:

npm install vue-router

Bước 2: Tạo file router.js để khai báo các tuyến đường

Trong thư mục src/, tạo file router.js và định nghĩa router:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Categories from '../views/Categories.vue'
import ProductDetail from '../views/ProductDetail.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/categories', component: Categories },
  { path: '/product/:id', component: ProductDetail }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Giải thích:

• path: '/' → Trang chủ.
• path: '/categories' → Trang danh mục sản phẩm.
• path: '/product/:id' → Trang chi tiết sản phẩm với Dynamic Route (:id).

Bước 3: Đăng ký Vue Router trong main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

2 Nested Routes (Trang con trong Vue Router)

Nested Routes giúp tổ chức các trang con một cách dễ dàng. Ví dụ:

• categories/ → Trang danh mục.
• categories/electronics → Trang danh mục con (Điện tử).
• categories/fashion → Trang danh mục con (Thời trang).

Cấu hình Nested Routes trong router.js

const routes = [
  { path: '/', component: Home },
  { 
    path: '/categories', 
    component: Categories,
    children: [
      { path: 'electronics', component: Electronics },
      { path: 'fashion', component: Fashion }
    ]
  }
]

Giải thích:

• path: '/categories' → Trang danh mục chính.
• path: 'electronics' → Trang con (Điện tử).
• path: 'fashion' → Trang con (Thời trang).

Sử dụng <router-view> để hiển thị Nested Routes

Trong Categories.vue

<template>
  <div>
    <h2>Danh mục sản phẩm</h2>
    <nav>
      <router-link to="/categories/electronics">Điện tử</router-link>
      <router-link to="/categories/fashion">Thời trang</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Giải thích:

• <router-link> → Dùng để điều hướng đến trang con.
• <router-view> → Dùng để hiển thị nội dung trang con tương ứng.

3 Điều hướng giữa các trang với Vue Router

Vue Router cung cấp nhiều cách để điều hướng trong ứng dụng:

Dùng <router-link> để điều hướng

<router-link to="/">Trang chủ</router-link>
<router-link to="/categories">Danh mục</router-link>

Dùng router.push() để điều hướng bằng JavaScript

this.$router.push('/categories')

Dùng router.replace() để thay đổi URL mà không lưu vào lịch sử

this.$router.replace('/categories')

Thực hành: Xây dựng ứng dụng có nhiều cấp độ điều hướng

Yêu cầu:

• Tạo ứng dụng Vue có trang Home, Danh mục sản phẩm, và Chi tiết sản phẩm.
• Trang danh mục có các trang con: Điện tử, Thời trang.
• Khi nhấn vào sản phẩm, sẽ chuyển đến trang chi tiết.

Bước 1: Tạo component Home.vue

<template>
  <div>
    <h1>Trang chủ</h1>
    <router-link to="/categories">Xem danh mục sản phẩm</router-link>
  </div>
</template>

Bước 2: Tạo component Categories.vue

<template>
  <div>
    <h1>Danh mục sản phẩm</h1>
    <nav>
      <router-link to="/categories/electronics">Điện tử</router-link>
      <router-link to="/categories/fashion">Thời trang</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Bước 3: Tạo component Electronics.vue

<template>
  <div>
    <h2>Điện tử</h2>
    <router-link to="/product/1">Xem sản phẩm Laptop</router-link>
  </div>
</template>

Bước 4: Tạo component Fashion.vue

<template>
  <div>
    <h2>Thời trang</h2>
    <router-link to="/product/2">Xem sản phẩm Áo sơ mi</router-link>
  </div>
</template>

Bước 5: Tạo component ProductDetail.vue

<template>
  <div>
    <h1>Chi tiết sản phẩm</h1>
    <p>ID sản phẩm: {{ $route.params.id }}</p>
    <router-link to="/categories">Quay lại danh mục</router-link>
  </div>
</template>

Giải thích:

• {{ $route.params.id }} → Lấy ID sản phẩm từ URL.
• router-link giúp quay lại danh mục sản phẩm.

Bước 6: Cập nhật router.js với Nested Routes

const routes = [
  { path: '/', component: Home },
  { 
    path: '/categories', 
    component: Categories,
    children: [
      { path: 'electronics', component: Electronics },
      { path: 'fashion', component: Fashion }
    ]
  },
  { path: '/product/:id', component: ProductDetail }
]

Kết luận

• Cấu hình Vue Router giúp quản lý điều hướng trong ứng dụng Vue.js.
• Nested Routes giúp tạo trang con để tổ chức giao diện rõ ràng hơn.
• Vue Router hỗ trợ nhiều phương thức điều hướng (router-link, router.push(), router.replace()).
• Thực hành: Xây dựng ứng dụng có trang chủ, danh mục, và chi tiết sản phẩm.