Vue Router ni njia rasmi ya klienti ya Vue SPA. Inakartografia URL katika vipengele na kuvinyweza bila upya kamili wa ukurasa, na inatoa wananunuzi wa uelekezaji kusambaza mantiki (kama vile ukaguzi wa uthibitisho) kabla ya uelekezaji.
{ createRouter, createWebHistory } ;
routes = [
{ : , : },
{ : , : },
{ : , : (),
: { : } },
];
router = ({ : (), routes });
<template>
<RouterLink to="/users/42">Profile</RouterLink> <!-- declarative navigation -->
<RouterView /> <!-- where the matched component renders -->
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); // read current route: route.params.id, route.query
const router = useRouter(); // navigate programmatically: router.push("/home")
</script>
// global guard — runs before EVERY navigation (great for auth)
router.beforeEach((to, from) => {
const authed = useAuthStore().isLoggedIn;
if (to.meta.requiresAuth && !authed) {
return "/login"; // redirect: return a path (or false to cancel)
}
// returning true / nothing → allow the navigation
});
Wananunuzi hupokea to (njia ya lengo) na from (sasa), na wanaweza kuruhusu, kukataa (false), au kubadilisha (kurudi eneo). Bendera ya meta.requiresAuth + beforeEach ya ulimwengu nzima ni muundo wa ukaguzi wa uthibitisho.
Global: router.beforeEach / afterEach — every navigation (auth, analytics)
Per-route: beforeEnter in the route config — specific routes
In-component: onBeforeRouteLeave — e.g. "unsaved changes, leave?" prompts
{ path: "/settings", component: Settings, children: [
{ path: "profile", component: Profile }, // → /settings/profile, renders in nested <RouterView>
]}
Zaidake: vigezo vya njia, kamba za swali, njia zilizopewa jina, tabia ya kuzunguka, na vipengele vya njia vilivyoletwa polepole kwa ajili ya mgawanyiko wa msimbo.
Vue Router ni muhimu kwa Vue SPA yoyote ya kurasa nyingi — inatoa uelekezaji wa klienti (haraka, hakuna upya), njia zenye nguvu/zilizozingatiwa, na RouterLink/RouterView.
Wananunuzi wa uelekezaji ni sifa muhimu kwa matatizo ya msalaba: kulinda njia zenye kinga kwa uthibitisho, kurekodi mifumo ya kurasa, na kuzuia uelekezaji mbali na mfumo usiothibitiswa.