Defining routes in Vue - Mini Project: Build & Apply

Defining routes in Vue 3

📖 Scenario: You are building a simple Vue 3 app that needs navigation between pages. To do this, you will define routes using Vue Router.Think of routes like street signs that tell your app which page to show when the user clicks a link or types a URL.

🎯 Goal: Create a Vue 3 router setup with two routes: Home and About. Each route should point to a simple component.

📋 What You'll Learn

Create a routes array with two route objects

Each route object must have a path and a component

Use createRouter and createWebHistory to make the router

Export the router as default

💡 Why This Matters

🌍 Real World

Defining routes is essential for building multi-page Vue apps where users can navigate between different views.

💼 Career

Vue Router is a core skill for frontend developers working with Vue.js to create user-friendly, navigable web applications.

1

Create two simple Vue components

Create two Vue components named Home and About using defineComponent. Each should have a template with a <h1> showing "Home Page" and "About Page" respectively.

Vue

// Define Home and About components using defineComponent
// Your code here

Need a hint?

Use defineComponent from Vue to create simple components with a template string.

2

Create a routes array with paths and components

Create a constant called routes that is an array with two objects. The first object should have path: '/' and component: Home. The second object should have path: '/about' and component: About.

Vue

import { defineComponent } from 'vue'

const Home = defineComponent({
  template: `Home Page`
})

const About = defineComponent({
  template: `About Page`
})

// Create routes array with two route objects
// Your code here

Need a hint?

Routes are objects with path and component keys inside an array.

3

Create the Vue Router instance

Import createRouter and createWebHistory from 'vue-router'. Then create a constant called router using createRouter with history set to createWebHistory() and routes set to the routes array.

Vue

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

const Home = defineComponent({
  template: `Home Page`
})

const About = defineComponent({
  template: `About Page`
})

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

// Create router using createRouter and createWebHistory
// Your code here

Need a hint?

Use createRouter with an object containing history and routes.

4

Export the router as default

Add a line to export the router constant as the default export of the module.

Vue

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

const Home = defineComponent({
  template: `Home Page`
})

const About = defineComponent({
  template: `About Page`
})

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

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

// Export router as default
// Your code here

Need a hint?

Use export default router to make the router available to other parts of the app.