Vue Router là router phía client chính thức cho các SPA Vue. Nó ánh xạ URL tới component và hoán đổi chúng mà không cần tải lại toàn trang, và cung cấp navigation guard để chạy logic (như kiểm tra xác thực) trước khi điều hướng.
{ createRouter, createWebHistory } ;
routes = [
{ : , : },
{ : , : },
{ : , : (),
: { : } },
];
router = ({ : (), routes });
<template>
<RouterLink to="/users/42">Profile</RouterLink> <!-- điều hướng khai báo -->
<RouterView /> <!-- nơi component khớp được render -->
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); // đọc route hiện tại: route.params.id, route.query
const router = useRouter(); // điều hướng theo lập trình: router.push("/home")
</script>
// guard toàn cục — chạy trước MỌI lần điều hướng (tuyệt vời cho auth)
router.beforeEach((to, from) => {
const authed = useAuthStore().isLoggedIn;
if (to.meta.requiresAuth && !authed) {
return "/login"; // chuyển hướng: trả về một path (hoặc false để hủy)
}
// trả về true / không gì → cho phép điều hướng
});
Guard nhận to (route đích) và from (route hiện tại), và có thể cho phép, hủy (false), hoặc chuyển hướng (trả về một địa điểm). Cờ meta.requiresAuth + một beforeEach toàn cục là mẫu chuẩn để chặn theo xác thực.
Toàn cục: router.beforeEach / afterEach — mọi lần điều hướng (auth, analytics)
Theo route: beforeEnter trong cấu hình route — các route cụ thể
Trong component: onBeforeRouteLeave — ví dụ nhắc "có thay đổi chưa lưu, rời đi?"
{ path: "/settings", component: Settings, children: [
{ path: "profile", component: Profile }, // → /settings/profile, render trong <RouterView> lồng nhau
]}
Cộng thêm: tham số route, query string, named route, hành vi scroll, và lazy-load component của route để code splitting.
Vue Router thiết yếu cho bất kỳ SPA Vue đa trang nào — nó cung cấp điều hướng phía client (nhanh, không tải lại), route động/lồng nhau, và RouterLink/RouterView.
Navigation guard là tính năng then chốt cho các mối quan tâm xuyên suốt: chặn các route được bảo vệ theo auth, ghi log lượt xem trang, và ngăn điều hướng rời khỏi form chưa lưu.
Mẫu meta + beforeEach toàn cục cho xác thực là thứ mà gần như mọi app thực tế đều triển khai.