Defining routes in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue Router configuration render?

Given the following Vue Router setup, what component will display when the URL path is /about?

Vue

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

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

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

export default router;

A No component will render; the page will be blank.

B The Home component will render.

C The About component will render.

D Both Home and About components will render simultaneously.

💡 Hint

Check which component is linked to the /about path in the routes array.

The route with path /about is linked to the About component, so navigating to /about renders About.

📝 Syntax

intermediate

Which option correctly defines a nested route in Vue Router?

Choose the correct syntax to define a nested route where /dashboard/settings loads the Settings component inside Dashboard.

A const routes = [{ path: '/dashboard', component: Dashboard, nested: [{ path: 'settings', component: Settings }] }];

B const routes = [{ path: '/dashboard/settings', component: Settings, parent: Dashboard }];

C const routes = [{ path: '/dashboard', component: Dashboard }, { path: '/dashboard/settings', component: Settings }];

D const routes = [{ path: '/dashboard', component: Dashboard, children: [{ path: 'settings', component: Settings }] }];

💡 Hint

Nested routes use the children property with relative paths.

Option D correctly uses the children array with a relative path settings to nest the Settings component inside Dashboard.

🔧 Debug

advanced

Why does this route configuration cause a navigation error?

Consider this Vue Router setup. Why will navigating to /profile/edit cause an error?

Vue

const routes = [
  { path: '/profile/edit', component: () => import('./EditProfile.vue') },
  { path: '/profile/:id', component: () => import('./Profile.vue') }
];

A Because the more specific route <code>/profile/edit</code> is defined after <code>/profile/:id</code>, causing a matching conflict.

B Because dynamic imports cannot be used in route components.

C Because the paths are missing a trailing slash.

D Because the routes array must have a unique name property for each route.

💡 Hint

Think about how Vue Router matches routes in order and the importance of route specificity.

Vue Router matches routes in order. Since /profile/:id matches before /profile/edit, the latter is never reached, causing navigation issues.

❓ state_output

advanced

What is the value of $route.params.id after navigating to /user/42?

Given this route definition, what will $route.params.id contain after navigating to /user/42?

Vue

const routes = [
  { path: '/user/:id', component: UserProfile }
];

A "id"

B "42"

C undefined

D 42 (number)

💡 Hint

Route parameters are always strings in Vue Router.

The :id parameter captures the segment as a string, so $route.params.id is the string "42".

🧠 Conceptual

expert

Which option best describes the purpose of in Vue Router?

What does the <router-view> component do in a Vue app using Vue Router?

A <router-view> is a placeholder where matched route components are rendered dynamically.

B <router-view> defines the navigation links for the app's routes.

C <router-view> is used to declare routes in the Vue Router configuration.

D <router-view> automatically fetches data for the current route.

💡 Hint

Think about where the content of the current route appears in the app.

acts as a slot where Vue Router inserts the component that matches the current route path.

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