Client-Side Routing

When you click a link in a traditional website, the browser sends a request to the server, which responds with a new HTML page. Every navigation is a full round trip.

A Single-Page Application (SPA) takes a different approach: the browser loads one HTML file once, and JavaScript handles all subsequent navigation — swapping out parts of the page without a server round trip. This is client-side routing.

The problem SPAs solve

Without client-side routing, a Vue app would be a single page with no URL-based navigation. You couldn’t link to a specific person’s detail page, the back button wouldn’t work, and refreshing would always take you to the root.

Client-side routing solves this by:

1. Intercepting navigation — when the user clicks a link or the URL changes, Vue Router handles it instead of the browser
2. Matching the URL to a component — each URL path maps to a Vue component (a “view”)
3. Rendering the component — the matched view renders in a <RouterView> placeholder in your template
4. Updating the browser history — the URL changes and the back/forward buttons work correctly

How Vue Router works

When you install Vue Router, it creates a router instance that:

• Registers the app with the browser’s History API
• Watches for navigation events (link clicks, browser back/forward, router.push() calls)
• Matches the current URL to a route record
• Renders the matched component inside <RouterView>

The browser never makes an HTTP request for navigation — Vue Router handles everything in JavaScript.

What FamilyTree needs

FamilyTree has four views:

URL	View	Purpose
/	HomeView	Focus tree — the main visual
/add	AddPersonView	Form to add a new person
/edit/:id	EditPersonView	Form to edit an existing person
/:id	PersonDetailView	Relationship management for a person

The :id in /edit/:id and /:id is a route parameter — a dynamic segment that captures part of the URL. PersonDetailView uses the captured id to load the right person from the store.

Exercise

No code yet — this lesson is conceptual.

1. List the four URLs FamilyTree needs (from the table above).
2. For each URL, describe what the user would see and what they could do.
3. Think about what happens when the user is on /edit/abc-123 and presses the browser back button. Where should they go?

Recap

• SPAs load once; client-side routing handles navigation in JavaScript without server round trips.
• Vue Router intercepts navigation, matches the URL to a route, and renders the matched component.
• The <RouterView> component is where the matched view renders.
• Route parameters (:id) capture dynamic URL segments for use in the matched component.