Why routing is needed for SPAs in Vue - Visual Breakdown

Concept Flow - Why routing is needed for SPAs

User clicks link or enters URL

↓

SPA intercepts navigation

↓

Routing logic decides which component to show

↓

Component is rendered without full page reload

↓

User sees new content smoothly

This flow shows how a SPA uses routing to change views without reloading the whole page, making navigation fast and smooth.

Execution Sample

Vue

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
const router = createRouter({ history: createWebHistory(), routes });
app.use(router);

This code sets up routes in a Vue SPA so clicking links changes components without reloading the page.

Execution Table

Step	User Action	Routing Decision	Component Rendered	Page Reload?
1	User visits '/' URL	Match '/' route	Home component	No
2	User clicks link to '/about'	Match '/about' route	About component	No
3	User clicks browser back button	Match '/' route	Home component	No
4	User enters unknown URL '/contact'	No match found	Fallback or 404 component	No
5	User refreshes browser on any route	Browser reloads page	Full page reload	Yes

💡 Routing stops when user refreshes browser causing full page reload, otherwise SPA handles navigation without reload.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
currentRoute	null	/	/about	/	/contact	reload
renderedComponent	none	Home	About	Home	404 or fallback	none

Key Moments - 3 Insights

Why doesn't the page reload when clicking links in a SPA?

Because the routing logic intercepts navigation and changes components internally without triggering a full browser reload, as shown in execution_table steps 1-4.

What happens if the user refreshes the browser on a SPA route?

The browser performs a full page reload because routing is handled client-side and refresh bypasses SPA logic, as shown in execution_table step 5.

Why do we need routing in a SPA instead of normal links?

Routing lets the SPA change views smoothly without reloading the page, improving speed and user experience, as seen in the flow and execution_table steps 1-4.

Visual Quiz - 3 Questions

Look at the execution table, what component is rendered after the user clicks the link to '/about'?

A About component

B Home component

C 404 or fallback component

D No component

💡 Hint

Check row 2 under 'Component Rendered' in the execution_table.

At which step does the page reload happen according to the execution table?

A Step 3

B Step 4

C Step 5

D Step 2

💡 Hint

Look for 'Page Reload?' column showing 'Yes' in the execution_table.

If the user enters an unknown URL, what does the SPA do?

A Reloads the page

B Shows a fallback or 404 component

C Shows the Home component

D Does nothing

💡 Hint

Refer to step 4 in the execution_table under 'Component Rendered'.

Concept Snapshot

Routing in SPAs lets the app change views without full page reloads.
User navigation triggers routing logic.
Routing matches URL paths to components.
Components update smoothly inside the SPA.
Page reload only happens on browser refresh.
This improves speed and user experience.

Full Transcript

Routing is needed in Single Page Applications (SPAs) to handle navigation without reloading the entire page. When a user clicks a link or enters a URL, the SPA intercepts this action and uses routing logic to decide which component to show. This lets the app update the visible content smoothly and quickly. The execution table shows steps where the user visits '/', clicks '/about', or enters an unknown URL, and how the SPA renders components accordingly without reloading. Only when the user refreshes the browser does a full page reload happen. This routing approach improves user experience by making navigation fast and seamless.

Practice

1. Why do Single Page Applications (SPAs) need routing?
Routing in SPAs helps to:

easy

A. Change views without reloading the whole page

B. Reload the entire website every time a link is clicked

C. Make the website slower by adding extra pages

D. Disable navigation between different parts of the app

Solution

1. Step 1: Understand SPA behavior

   SPAs load a single HTML page and dynamically update content without full reloads.

2. Step 2: Role of routing in SPAs

   Routing allows switching views inside the SPA without refreshing the browser, improving speed and user experience.

3. Final Answer:

   Change views without reloading the whole page -> Option A

4. Quick Check:

   Routing in SPAs = Change views without reload [OK]

Hint: Routing changes views inside SPA without page reload [OK]

Common Mistakes:

• Thinking SPAs reload the whole page on navigation
• Confusing routing with server-side page loads
• Believing routing disables navigation

2. Which of the following is the correct way to define a route in Vue Router?

easy

A. const routes = { '/home': HomePage }

B. const routes = [{ path: '/home', component: HomePage }]

C. const routes = ['/home', HomePage]

D. const routes = [path: '/home', component: HomePage]

Solution

1. Step 1: Recall Vue Router route syntax

   Routes are defined as an array of objects with path and component keys.

2. Step 2: Match syntax with options

   const routes = [{ path: '/home', component: HomePage }] correctly uses an array with an object containing path and component.

3. Final Answer:

   const routes = [{ path: '/home', component: HomePage }] -> Option B

4. Quick Check:

   Vue Router routes = array of objects with path and component [OK]

Hint: Routes are array of objects with path and component keys [OK]

Common Mistakes:

• Using object instead of array for routes
• Missing curly braces for route objects
• Incorrect array structure without keys

3. Given this Vue Router setup:

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

// User visits '/about'

What component will Vue display?

medium

A. No component, blank page

B. Home component

C. About component

D. Error message

Solution

1. Step 1: Check the route matching the URL

   The URL '/about' matches the route with path '/about' which uses the About component.

2. Step 2: Determine displayed component

   Vue Router will render the About component for the '/about' path.

3. Final Answer:

   About component -> Option C

4. Quick Check:

   URL '/about' shows About component [OK]

Hint: URL path matches route path to show component [OK]

Common Mistakes:

• Assuming default '/' route always shows
• Confusing component names
• Thinking Vue reloads page instead of switching component

4. What is wrong with this Vue Router code?

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory,
  routes
})

medium

A. createWebHistory is missing parentheses

B. Routes array should be an object

C. Component names must be strings

D. Router must be created with createRouter()

Solution

1. Step 1: Check usage of createWebHistory

   createWebHistory is a function and must be called with parentheses to return history object.

2. Step 2: Identify error in code

   Code uses createWebHistory without parentheses, so history is not set correctly.

3. Final Answer:

   createWebHistory is missing parentheses -> Option A

4. Quick Check:

   Functions need () when called [OK]

Hint: Functions like createWebHistory need () to run [OK]

Common Mistakes:

• Forgetting parentheses on function calls
• Confusing array and object syntax for routes
• Thinking component names must be strings

5. You want users to bookmark and share specific views in your Vue SPA. How does routing help achieve this?

hard

A. Routing disables navigation to prevent URL changes

B. Routing reloads the page to show the bookmarked view

C. Routing hides the URL so users cannot share links

D. Routing updates the URL to reflect the current view without reloading

Solution

1. Step 1: Understand URL role in SPAs

   SPAs use routing to change the URL path dynamically without full page reloads.

2. Step 2: How routing supports bookmarking

   By updating the URL, routing lets users bookmark or share links that open the app at the same view.

3. Final Answer:

   Routing updates the URL to reflect the current view without reloading -> Option D

4. Quick Check:

   Routing updates URL for sharing/bookmarking [OK]

Hint: Routing changes URL so views can be bookmarked/shared [OK]

Common Mistakes:

• Thinking routing reloads the page for bookmarks
• Believing URLs stay static in SPAs
• Assuming routing disables URL changes