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.