Vue Router routing ਅਤੇ guards ਨੂੰ ਕਿਵੇਂ ਸਭਾਲਦਾ ਹੈ?

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 });

<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
});

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>
]}