12. Vue Router

// router/index.ts
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),                          // or createWebHashHistory()
  routes: [
    { path: "/", component: () => import("@/views/Home.vue") },
    { path: "/orders", name: "orders", component: () => import("@/views/Orders.vue") },
    { path: "/orders/:id(\\d+)", name: "order", component: () => import("@/views/OrderDetail.vue"), props: true },
    { path: "/admin", component: () => import("@/views/Admin.vue"), meta: { requiresAuth: true },
      children: [{ path: "users", component: () => import("@/views/AdminUsers.vue") }] },
    { path: "/:pathMatch(.*)*", component: () => import("@/views/NotFound.vue") },
  ],
});

router.beforeEach(to => {                               // global navigation guard
  const auth = useAuthStore();
  if (to.meta.requiresAuth && !auth.isLoggedIn) return { name: "login", query: { redirect: to.fullPath } };
});
export default router;

<RouterLink :to="{ name: 'order', params: { id: o.id } }">Open</RouterLink>
<RouterView />
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();       // route.params.id, route.query
const router = useRouter();     // router.push({ name: "orders" })
</script>