# How Quiz-App Routes Work with Vue Router in Microsoft's Web-Dev-For-Beginners

> Learn how quiz-app routes work with Vue Router in Microsoft's Web-Dev-For-Beginners. Explore client-side routing, dynamic parameters, and code splitting for efficient web development.

- Repository: [Microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Tags: deep-dive
- Published: 2026-02-27

---

**The Quiz-App implements client-side routing using Vue Router's `createRouter` function with HTML5 History mode, mapping URLs to components through a centralized configuration in [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/router/index.js) that supports static paths, dynamic parameters, and lazy-loaded code splitting.**

The Microsoft Web-Dev-For-Beginners repository contains a Vue.js Quiz-App that demonstrates modern single-page application architecture. Understanding how quiz-app routes work with Vue Router provides practical insight into declarative routing patterns, dynamic route parameter handling, and performance optimization techniques used in production Vue applications.

## Router Configuration and History Mode

The routing configuration begins in [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/router/index.js) where the router instance is created using Vue Router's composition API functions. The implementation uses `createWebHistory(import.meta.env.BASE_URL)` to enable **HTML5 History mode**, which removes hash symbols from URLs and allows the app to use standard path structures like `/quiz/3` while maintaining client-side navigation without server page refreshes.

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // route definitions
  ]
})

```

This configuration ensures that all route changes are handled internally by the Vue Router state machine, providing seamless transitions between quiz views.

## Route Definitions and Component Mapping

The `routes` array inside [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/router/index.js) defines three distinct navigation targets, each demonstrating different Vue Router capabilities:

### Home Route

The root path `/` maps directly to [`HomeView.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/HomeView.vue) using static component registration. This eager-loaded component is imported at the top of the router file and bundled with the main application chunk.

```javascript
{
  path: '/',
  name: 'home',
  component: HomeView
}

```

### Dynamic Quiz Detail Route

The `/quiz/:id` path uses a **dynamic segment** (`:id`) to capture variable quiz identifiers from the URL. This route renders [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue) and passes the captured `id` parameter to the component via the `$route.params` object. This pattern enables the app to display different quiz content using a single component template.

```javascript
{
  path: '/quiz/:id',
  name: 'quiz-detail',
  component: () => import('../components/QuizComponent.vue')
}

```

### Lazy-Loaded About Route

The `/about` path implements **code splitting** through an inline dynamic `import()` statement. Rather than importing [`AboutView.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/AboutView.vue) at the top of the file, the component function returns a Promise that loads the chunk only when the user navigates to this route. Vue Router automatically handles the chunk generation, creating a separate JavaScript file (e.g., `About.[hash].js`) that reduces the initial bundle size.

```javascript
{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue')
}

```

## Integrating the Router with the Vue Application

In [`src/main.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/main.js), the configured router instance is imported and registered with the Vue application using `app.use(router)`. This install step activates the router plugin, making routing functionality available throughout the component tree.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

```

Once mounted, the `<router-view>` component placed in [`App.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/App.vue) acts as a dynamic outlet, automatically rendering the component that matches the current URL path.

## Navigating Between Routes

The Quiz-App supports both declarative and programmatic navigation patterns.

Use `<router-link>` for template-based navigation, passing route parameters via the `params` object:

```html
<router-link :to="{ name: 'quiz-detail', params: { id: quiz.id } }">
  Start Quiz {{ quiz.title }}
</router-link>

```

For programmatic navigation from within component methods, access the router instance via `this.$router` and call the `push` method:

```javascript
export default {
  methods: {
    goToQuiz(id) {
      this.$router.push({ name: 'quiz-detail', params: { id } })
    }
  }
}

```

## Accessing Route Parameters

Inside [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue), the dynamic `id` parameter is accessed through the **composable route object**. The component uses `this.$route.params.id` to retrieve the current quiz identifier and fetch corresponding data:

```javascript
export default {
  computed: {
    quizId() {
      return this.$route.params.id   // Returns value from URL like "3"
    }
  },
  created() {
    // Load the quiz data using the id parameter
    this.fetchQuiz(this.quizId)
  }
}

```

This reactive parameter access ensures the component updates automatically if the route changes while the component remains mounted.

## Summary

- **History Mode**: The router in [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/router/index.js) uses `createWebHistory` to enable clean URLs without hash fragments.
- **Dynamic Parameters**: The `/quiz/:id` route captures variable segments and exposes them via `$route.params.id` in [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue).
- **Code Splitting**: The About route uses inline dynamic imports to lazy-load [`AboutView.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/AboutView.vue), improving initial load performance.
- **Global Registration**: The router is installed in [`src/main.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/main.js) via `app.use(router)`, making navigation features available throughout the application.

## Frequently Asked Questions

### How does the Quiz-App extract the quiz ID from the URL?

The Quiz-App accesses the dynamic route parameter through `this.$route.params.id` inside [`QuizComponent.vue`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/QuizComponent.vue). When a user visits a URL like `/quiz/3`, Vue Router captures the `3` as the `id` parameter and makes it available on the route object, which the component uses to fetch the specific quiz data.

### Why does the Quiz-App router use createWebHistory instead of hash mode?

The `createWebHistory` function in [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/router/index.js) enables the HTML5 History API, which produces clean URLs like `/quiz/3` rather than `/#/quiz/3`. This provides better SEO compatibility and a more conventional URL structure while maintaining client-side navigation without page reloads.

### How is code splitting implemented for the About page?

The About route in [`src/router/index.js`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/src/router/index.js) uses an arrow function that returns `import('../views/AboutView.vue')` rather than a static import statement. This dynamic import syntax tells the bundler to create a separate JavaScript chunk that loads only when the user navigates to `/about`, reducing the initial bundle size.

### What is the difference between `$router` and `$route` in the Quiz-App?

`$router` (accessed via `this.$router`) is the global router instance that provides navigation methods like `push()` and `go()`. `$route` (accessed via `this.$route`) is the immutable route object representing the current state, containing `params`, `query`, and `path` properties used to read URL data such as the quiz ID.