- Biết cách cài đặt và sử dụng Vue Router
- Tạo nhiều trang như: Home, About, Contact
- Điều hướng giữa các trang không reload
Vue Router giúp tạo website nhiều trang (route), nhưng vẫn hoạt động như một trang duy nhất (Single Page Application – SPA). Điều này giúp trải nghiệm mượt mà như ứng dụng di động.
App.vue → Giao diện chính (chứa router-view)
router/index.js → Cấu hình đường dẫn
pages/Home.vue
pages/About.vue
Giao diện học (1 file HTML chạy trực tiếp với Vue + Router CDN)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Vue Router Demo</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<style>
body {
font-family: Arial;
padding: 20px;
}
nav a {
margin-right: 15px;
text-decoration: none;
color: blue;
}
nav a.router-link-exact-active {
font-weight: bold;
color: darkgreen;
}
.page {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app">
<h2>🌐 Website Vue Router</h2>
<nav>
<router-link to="/">Trang chủ</router-link>
<router-link to="/about">Giới thiệu</router-link>
<router-link to="/contact">Liên hệ</router-link>
</nav>
<div class="page">
<router-view></router-view>
</div>
</div>
<script>
const Home = {
template: `<div><h3>🏠 Đây là trang chủ</h3><p>Chào mừng đến với website Vue!</p></div>`
}
const About = {
template: `<div><h3>ℹ️ Trang giới thiệu</h3><p>Chúng tôi là lập trình viên Vue.</p></div>`
}
const Contact = {
template: `<div><h3>📞 Liên hệ</h3><p>Gửi email đến: vue@example.com</p></div>`
}
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes
})
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
</script>
</body>
</html>
| Thành phần | Ý nghĩa |
|---|---|
router-link to="/about" | Link điều hướng không reload |
router-view | Nơi hiển thị nội dung tương ứng route |
routes = [ { path, component } ] | Khai báo các đường dẫn |
createWebHashHistory() | Sử dụng # trong URL để định tuyến (dễ test local) |
- Thêm một route
/blogvới nội dung danh sách bài viết. - Tạo một route động
/user/:nameđể hiển thị tên người dùng từ URL. - Đổi sang
createWebHistory()để bỏ dấu#(cần cấu hình server hỗ trợ).
Thảo luận