Để tích hợp hệ thống điều hướng vào ứng dụng Vue.js, cần thực hiện một chuỗi các bước cấu hình cơ bản. Dưới đây là hướng dẫn chi tiết với cách triển khai hiện đại và rõ ràng hơn.
1. Nhúng thư viện vue-router
Thêm tệp vue-router vào dự án thông qua thẻ <script>:
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>2. Đăng ký plugin toàn cục
Sử dụng phương thức Vue.use() để kích hoạt router:
Vue.use(VueRouter);3. Khởi tạo instance router
Tạo đối tượng điều hướng bằng cách truyền cấu hình vào constructor:
const appRouter = new VueRouter({ /* cấu hình tại đây */ });4. Định nghĩa các tuyến đường (routes)
Mỗi route bao gồm ba thuộc tính chính:
- path: Đường dẫn URL (ví dụ:
/dashboard), tương ứng phần sau dấu#/trong URL. - name: Tên định danh duy nhất — cho phép điều hướng bằng tên thay vì đường dẫn cố định.
- component: Thành phần Vue sẽ được hiển thị khi route khớp.
const routes = [
{ name: 'home', path: '/', component: HomePage },
{ name: 'profile', path: '/user/:id', component: UserProfile }
];5. Gắn router vào instance Vue chính
Truyền đối tượng router vào tùy chọn router khi khởi tạo ứng dụng:
new Vue({
el: '#app',
router: appRouter,
render: h => h(App)
});6. Xác định vùng hiển thị nội dung động
Dùng thành phần <router-view> làm "khung chứa" cho các component được tải theo route:
<div id="app">
<nav>
<router-link to="/">Trang chủ</router-link>
<router-link :to="{ name: 'profile', params: { id: 123 } }">Hồ sơ</router-link>
</nav>
<router-view></router-view>
</div>Ví dụ hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Router Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const Home = { template: '<h2>Trang chủ</h2>' };
const About = { template: '<h2>Giới thiệu</h2>' };
const routes = [
{ name: 'home', path: '/', component: Home },
{ name: 'about', path: '/gioi-thieu', component: About }
];
const router = new VueRouter({ routes });
const App = {
template: `
<div>
<header>
<router-link to="/">🏠 Trang chủ</router-link>
<router-link to="/gioi-thieu">ℹ️ Giới thiệu</router-link>
</header>
<main><router-view></router-view></main>
</div>
`
};
new Vue({
el: '#app',
router,
render: h => h(App)
});
</script>
</body>
</html>