Why routing is needed for SPAs in Vue - See It in Action

Why routing is needed for SPAs

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Most modern web apps use SPAs to provide smooth user experiences without full page reloads. Routing is essential to switch views inside the app.

💼 Career

Understanding routing in Vue is key for frontend developer roles building interactive web applications.

1

Create the initial Vue app structure

Create a Vue app with a root App component that contains a <template> with a <div> and a <router-view> tag inside it.

Vue

  
    
  



// Your code here

Need a hint?

Use the <router-view> tag inside your root component to show the current page content.

2

Add route configuration

Create a constant called routes that is an array with three route objects. Each object should have a path and a component property. Use paths '/', '/products', and '/contact'. For components, use simple objects with a template string: '

Home Page

', '

Products Page

', and '

Contact Page

' respectively.

Vue

  
    
  



const routes = [
  // Your code here
]

Need a hint?

Define routes as an array of objects with path and component keys.

3

Create the Vue Router instance

Import createRouter and createWebHistory from 'vue-router'. Then create a constant called router by calling createRouter with an object that has history set to createWebHistory() and routes set to the routes constant.

Vue

  
    
  



import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: { template: 'Home Page' } },
  { path: '/products', component: { template: 'Products Page' } },
  { path: '/contact', component: { template: 'Contact Page' } }
]

// Your code here

Need a hint?

Use createRouter with history and routes keys to set up routing.

4

Complete the app by mounting router and adding navigation

Import createApp from 'vue'. Create the app with createApp(App). Use app.use(router) to add the router. Mount the app to #app. Also, inside the <template> add a <nav> with three <router-link> tags with to attributes set to '/', '/products', and '/contact' respectively, and text 'Home', 'Products', and 'Contact'.

Vue

  
    
    
  



import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'

const routes = [
  { path: '/', component: { template: 'Home Page' } },
  { path: '/products', component: { template: 'Products Page' } },
  { path: '/contact', component: { template: 'Contact Page' } }
]

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

// Your code here

Need a hint?

Add navigation links with <router-link> and mount the Vue app with the router.