Πώς το Vue Router διαχειρίζεται τη δρομολόγηση και τις φρουρές;

Question

Accepted Answer

Το **Vue Router** είναι ο επίσημος δρομολογητής πλευράς ελάχιστου για Vue SPAs. Χαρτογραφεί URLs σε συστατικά και τα ανταλλάσσει **χωρίς πλήρη επαναφόρτωση της σελίδας** και παρέχει **φρουρές πλοήγησης** για εκτέλεση λογικής (όπως έλεγχοι ταυτοποίησης) πριν από την πλοήγηση. ## Ορισμός διαδρομών ```js import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", component: Home }, { path: "/users/:id", component: UserProfile }, // dynamic param { path: "/dashboard", component: () => import("./Dashboard.vue"), // lazy-loaded meta: { requiresAuth: true } }, // attach metadata ]; const router = createRouter({ history: createWebHistory(), routes }); ``` ## Πλοήγηση και ανάγνωση παραμέτρων ```vue ``` ## Φρουρές πλοήγησης — εκτέλεση λογικής πριν από την πλοήγηση ```js // 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 }); ``` Οι φρουρές λαμβάνουν **`to`** (διαδρομή προορισμού) και **`from`** (τρέχουσα) και μπορούν να επιτρέψουν, να ακυρώσουν (`false`) ή να ανακατευθύνουν (επιστροφή τοποθεσίας). Η σημαία `meta.requiresAuth` + μια παγκόσμια `beforeEach` είναι το κανονικό σχέδιο gating ταυτοποίησης. ## Επίπεδα φρουρών ```text 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 ``` ## Εμfonted διαδρομές και άλλα χαρακτηριστικά ```js { path: "/settings", component: Settings, children: [ { path: "profile", component: Profile }, // → /settings/profile, renders in nested ]} ``` Συν: παράμετροι διαδρομής, συμβολοσειρές ερωτημάτων, ονοματισμένες διαδρομές, συμπεριφορά κύλισης και Lazy-φορτωμένα συστατικά διαδρομής για διαχωρισμό κώδικα. ## Γιατί έχει σημασία Το Vue Router είναι απαραίτητο για οποιοδήποτε πολυσελιδο Vue SPA — παρέχει πλοήγηση πλευράς ελάχιστου (γρήγορη, χωρίς επαναφόρτωση), δυναμικές/ενσωματωμένες διαδρομές και `RouterLink`/`RouterView`. Οι φρουρές πλοήγησης είναι η βασική δυνατότητα για ανησυχίες που διασταυρώνονται: gating προστατευμένων διαδρομών κατά ταυτοποίηση, καταγραφή προβολών σελίδας και αποτροπή πλοήγησης μακριά από μη αποθηκευμένες φόρμες. Το σχέδιο `meta` + παγκόσμια `beforeEach` για ταυτοποίηση είναι κάτι που υλοποιεί σχεδόν κάθε πραγματική εφαρμογή.