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

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

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

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

Hint

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

Practice

1. What is the main purpose of defining routes in a Vue application?

easy

A. To style components with CSS

B. To connect URLs to components so different pages can be shown

C. To manage state between components

D. To handle user input events

Solution

1. Step 1: Understand the role of routes

   Routes link specific URLs to Vue components, allowing navigation between pages.

2. Step 2: Identify the correct purpose

   Connecting URLs to components matches the description of routing.

3. Final Answer:

   To connect URLs to components so different pages can be shown -> Option B

4. Quick Check:

   Routes = URL to component mapping [OK]

Hint: Routes map URLs to components for page navigation [OK]

Common Mistakes:

• Confusing routes with styling or CSS
• Thinking routes manage state or events
• Mixing routes with user input handling

2. Which of the following is the correct way to define a route for path '/home' using a component named HomeView?

easy

A. { path: '/home', component: HomeView }

B. { route: '/home', view: HomeView }

C. { url: '/home', component: HomeView }

D. { path: '/home', view: HomeView }

Solution

1. Step 1: Recall route object keys

   Routes use keys 'path' for URL and 'component' for the Vue component.

2. Step 2: Match correct syntax

   { path: '/home', component: HomeView } uses correct keys: path and component with proper values.

3. Final Answer:

   { path: '/home', component: HomeView } -> Option A

4. Quick Check:

   Route keys = path + component [OK]

Hint: Use 'path' and 'component' keys to define routes [OK]

Common Mistakes:

• Using 'route' or 'url' instead of 'path'
• Using 'view' instead of 'component'
• Mixing keys or misspelling them

3. Given this route setup:

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});

What component will show when the URL is '/about'?

medium

A. AboutView

B. HomeView

C. createRouter

D. createWebHistory

Solution

1. Step 1: Check the route matching '/about'

   The route with path '/about' uses component AboutView.

2. Step 2: Understand router behavior

   When URL is '/about', Vue Router renders AboutView component.

3. Final Answer:

   AboutView -> Option A

4. Quick Check:

   URL '/about' shows AboutView [OK]

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

Common Mistakes:

• Confusing router functions with components
• Choosing HomeView for '/about' URL
• Not linking URL to correct route

4. Identify the error in this route definition:

const routes = [
  { path: '/contact', component ContactView }
];

medium

A. Component name should be a string

B. Path should start with '#' instead of '/'

C. Missing colon ':' after 'component'

D. Routes array should be inside createRouter

Solution

1. Step 1: Check object syntax in route

   Each key-value pair must have a colon ':' separating them.

2. Step 2: Spot missing colon after 'component'

   In the route, 'component ContactView' misses ':'; it should be 'component: ContactView'.

3. Final Answer:

   Missing colon ':' after 'component' -> Option C

4. Quick Check:

   Object syntax needs ':' [OK]

Hint: Check colons between keys and values in objects [OK]

Common Mistakes:

• Forgetting colon ':' in object properties
• Using '#' instead of '/' in paths
• Putting component names as strings incorrectly

5. You want to create a Vue router with two routes: '/' showing HomeView and '/profile/:id' showing ProfileView. Which code correctly defines these routes and sets up the router?

hard

A. const routes = [
{ path: '/', component: HomeView },
{ path: '/profile/:id', component: ProfileView }
];
const router = createRouter({
history: createMemoryHistory(),
routes
});

B. const routes = [
{ path: '/', component: HomeView },
{ path: '/profile/id', component: ProfileView }
];
const router = createRouter({
history: createWebHistory(),
routes
});

C. const routes = [
{ path: '/', component: HomeView },
{ path: '/profile/:id', component: 'ProfileView' }
];
const router = createRouter({
history: createWebHistory(),
routes
});

D. const routes = [
{ path: '/', component: HomeView },
{ path: '/profile/:id', component: ProfileView }
];
const router = createRouter({
history: createWebHistory(),
routes
});

Solution

1. Step 1: Define routes with dynamic segment

   Use '/profile/:id' to capture dynamic id parameter correctly.

2. Step 2: Use correct component references and history mode

   Components must be variables (not strings). Use createWebHistory() for normal web routing.

3. Step 3: Check each option

   const routes = [ { path: '/', component: HomeView }, { path: '/profile/:id', component: ProfileView } ]; const router = createRouter({ history: createWebHistory(), routes }); matches all requirements: dynamic path, component variables, and web history.

4. Final Answer:

   Correct route array with dynamic segment and createWebHistory() -> Option D

5. Quick Check:

   Dynamic routes use ':param' and createWebHistory() [OK]

Hint: Use ':param' for dynamic routes and createWebHistory() for browser routing [OK]

Common Mistakes:

• Using literal 'id' instead of ':id' for dynamic segments
• Passing component names as strings instead of variables
• Using createMemoryHistory() instead of createWebHistory() for web apps