Pages and file-based routing in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue page component render?

Given a file named src/pages/About.vue in a Vue 3 app using file-based routing, what will the page display when navigating to /about?

Vue

<template>
  <section>
    <h1>About Us</h1>
    <p>Welcome to our site!</p>
  </section>
</template>

<script setup>
// no script needed
</script>

A A blank page with no content

B A page showing 'Home' heading instead

C A page showing a heading 'About Us' and a paragraph 'Welcome to our site!'

D An error because the script section is empty

💡 Hint

Think about how Vue file-based routing maps file names to URLs and renders the template.

In Vue file-based routing, the file About.vue inside pages folder maps to the /about URL. The template content is rendered as the page content.

📝 Syntax

intermediate

Which file name creates a dynamic route for user profiles?

In Vue file-based routing, which file name inside src/pages correctly creates a dynamic route to match URLs like /user/123 where 123 is a user ID?

A user/_id.vue

B user/:id.vue

C user/{id}.vue

D user/[id].vue

💡 Hint

Vue uses square brackets for dynamic route parameters in file names.

In Vue file-based routing, dynamic route parameters are defined by enclosing the parameter name in square brackets, like [id].vue.

🔧 Debug

advanced

Why does this nested route not render the child page?

Given these files: - src/pages/dashboard.vue - src/pages/dashboard/settings.vue Navigating to /dashboard/settings shows a blank page. Why?

A The child file name should be <code>_settings.vue</code> for nested routes

B The parent <code>dashboard.vue</code> lacks a <code>&lt;router-view&gt;</code> to display child routes

C The <code>settings.vue</code> file must be inside a folder named <code>dashboard</code> to work

D Vue file-based routing does not support nested routes

💡 Hint

Think about how nested routes display their children in Vue.

Nested routes require the parent component to include a <router-view> element where child routes render. Without it, child pages won't appear.

❓ state_output

advanced

What is the value of the route param in this page?

In a Vue page component src/pages/blog/[slug].vue, the script setup contains:

import { useRoute } from 'vue-router';
const route = useRoute();
const slug = route.params.slug;

If the user visits /blog/vue-routing, what is the value of slug?

A "vue-routing"

B "_slug"

C undefined

D "blog/vue-routing"

💡 Hint

Route params capture the dynamic part of the URL matching the file name.

The dynamic segment [slug] captures the part of the URL after /blog/. So visiting /blog/vue-routing sets slug to "vue-routing".

🧠 Conceptual

expert

Which option correctly describes the behavior of catch-all routes in Vue file-based routing?

You want to create a catch-all route that matches any path not matched by other routes, for example to show a 404 page. Which file name inside src/pages achieves this?

A [...all].vue

B _all.vue

C [...all].vue with a <code>definePageMeta({ catchAll: true })</code> in script

D euv.]lla...[

💡 Hint

Catch-all routes use a special syntax with three dots inside square brackets.

In Vue file-based routing, catch-all routes are defined by files named with three dots inside square brackets, like [...all].vue. This matches any unmatched path.