Module Recap

Module 05 covered Vue Router end to end: the concept of client-side routing, route definitions, <RouterView>, <RouterLink>, route parameters, programmatic navigation, and guards. FamilyTree is now a proper multi-page SPA.

What you learned

Client-side routing lets SPAs navigate without page reloads. Vue Router intercepts navigation, matches the URL to a route record, and renders the matched component in <RouterView>. The browser History API keeps back/forward working.

Routes are defined in an array. Each record maps a path to a component. Dynamic segments (:id) capture URL values. Lazy loading (() => import(...)) defers downloading view code until first visit.

<RouterLink> is Vue’s <a> tag. It prevents page reloads, applies active classes automatically, and supports named routes and params. Named routes are more maintainable than hardcoded paths.

useRoute() reads the current URL state. route.params.id gives the captured dynamic segment. route.query gives query string values. Watch params if the component needs to respond to navigation within the same route.

useRouter() enables programmatic navigation. router.push({ name, params }) navigates and adds history. router.replace() replaces the current entry. Guards (beforeEach, beforeEnter) intercept navigation to redirect or cancel.

How this connects to FamilyTree

FamilyTree’s router:

const routes = [
  { path: '/',        name: 'home',   component: HomeView },
  { path: '/add',     name: 'add',    component: AddPersonView },   // lazy
  { path: '/edit/:id', name: 'edit',  component: EditPersonView },  // lazy, with param
  { path: '/:id',     name: 'person', component: PersonDetailView }, // lazy, with param
]

Navigation flow:

• FocusView emits select → parent calls store.setFocus(id) + router.push({ name: 'home' })
• PersonCard emits select → PersonDetailView uses router.push({ name: 'home' }) after deletions
• Forms submit → router.push({ name: 'person', params: { id } }) after save

Key terms

Term	What it means
createRouter({ routes })	Creates the router instance
createWebHistory()	Clean URLs using the History API
Route record	{ path, name, component } — one URL-to-view mapping
:param	Dynamic route segment captured as route.params.param
<RouterView>	Placeholder where matched view renders
<RouterLink :to="...">	Navigation link — no page reload
useRoute()	Composable returning current route state
useRouter()	Composable returning router for programmatic navigation
router.push(location)	Navigate and add to history
beforeEach(guard)	Global navigation interceptor

What is next

Module 06 — State Management with Pinia →

Module 06 introduces Pinia — Vue’s official state management library. You’ll learn why global state exists, how to define a store with defineStore, what state/getters/actions map to in setup syntax, how to use stores in components with storeToRefs, and how to persist state to localStorage.