# Vue Router Architecture in the Microsoft AI-For-Beginners Quiz App: Complete Setup Guide

> Explore the Vue Router architecture in the AI-For-Beginners quiz app. Learn about HTML5 history mode, route definitions, and instance injection for global navigation.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: architecture
- Published: 2026-08-23

---

**The quiz-app uses Vue 2.x with vue-router configured in HTML5 history mode, defining routes for home, dynamic quiz IDs, and 404 handling in [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js), while the router instance is injected into the root Vue application in [`main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/main.js) to enable global navigation access.**

The Microsoft AI-For-Beginners repository includes an interactive quiz application that demonstrates practical client-side routing patterns using Vue 2.x. This guide examines the Vue Router setup in the quiz-app, detailing how route definitions, navigation guards, and programmatic navigation work together to create a seamless single-page application experience.

## Router Instance Configuration

In [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js), the router instance is created using the Vue Router constructor with explicit configuration for modern browsing behavior. The implementation uses **HTML5 history mode** via `mode: 'history'`, which eliminates hash-based URLs and enables clean paths compatible with server-side routing fallbacks.

The base URL configuration relies on the environment variable `process.env.BASE_URL`, allowing the application to deploy under arbitrary sub-paths without code changes. This dynamic base configuration ensures the Vue Router architecture remains flexible for various hosting environments.

```javascript
// etc/quiz-app/src/router/index.js
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // Route definitions
  ]
})

```

## Route Definitions and Navigation Patterns

The `routes` array declares three distinct navigation patterns that govern the application's view layer. Each route object maps URL patterns to specific Vue components, with the dynamic quiz route capturing URL parameters for data retrieval.

### Home Route Configuration

The root path `'/'` resolves to the [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue) view component, assigned the name `'home'` for programmatic navigation. This entry point serves as the landing page for the quiz application.

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

```

### Dynamic Quiz Route with Parameters

The `/quiz/:id` path implements **dynamic route matching** using the `:id` segment, enabling the application to load different quiz content based on the URL parameter. Named `'Quiz'`, this route renders the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component and captures the identifier via `this.$route.params.id` in the component logic.

```javascript
{
  path: '/quiz/:id',
  name: 'Quiz',
  component: Quiz
}

```

### 404 Catch-All Route

A wildcard pattern `'/:pathMatch(.*)*'` captures unmatched URLs, rendering the [`NotFound.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/NotFound.vue) component. This route includes a **meta field** defining the page title, accessible within navigation guards for dynamic document title updates.

```javascript
{
  path: '/:pathMatch(.*)*',
  component: NotFound,
  meta: { title: 'Not Found' }
}

```

## Global Navigation Guards

The router implements a **global beforeEach guard** registered via `router.beforeEach((to, from, next) => { ... })`. Currently configured to invoke `next()` immediately, this hook provides an extension point for future authentication checks, analytics tracking, or dynamic title management based on route meta fields.

```javascript
router.beforeEach((to, from, next) => {
  // Extension point for authentication or analytics
  next()
})

```

To utilize the meta title for the 404 route, you can extend the guard as follows:

```javascript
router.beforeEach((to, from, next) => {
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

```

## Integrating Router with the Vue Application

In [`etc/quiz-app/src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/main.js), the configured router instance is imported and passed to the Vue constructor alongside the internationalization plugin. This injection makes the **$router** and **$route** objects available throughout the component tree via Vue's reactivity system.

```javascript
// etc/quiz-app/src/main.js
import router from './router'

new Vue({
  i18n,
  router,
  render: h => h(App)
}).$mount('#app')

```

With this integration, components access navigation utilities through `this.$router` for programmatic control and `this.$route` for current route information including parameters and meta fields.

## Client-Side Navigation Implementation

The quiz-app supports both declarative and imperative navigation patterns. For template-based navigation, the `<router-link>` component creates accessible anchor tags that trigger route changes without page reloads.

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

```

For programmatic navigation within methods or computed properties, the `$router.push()` method accepts a location descriptor object containing the route name and parameters.

```javascript
// Navigate to quiz ID 42
this.$router.push({ name: 'Quiz', params: { id: 42 } })

```

Components access dynamic segments through the `$route.params` object, enabling data fetching based on URL state.

```javascript
export default {
  computed: {
    quizId() {
      return this.$route.params.id  // Returns "42" from /quiz/42
    }
  }
}

```

## Summary

- The Vue Router setup in [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js) uses HTML5 history mode with environment-based base URL configuration for flexible deployment.
- Three route patterns handle home navigation (`'/'`), dynamic quiz loading (`'/quiz/:id'`), and 404 error handling via a catch-all regex pattern.
- A global `beforeEach` navigation guard provides hooks for authentication and analytics, currently passing through all navigation requests.
- The router instance integrates into the root Vue application in [`main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/main.js), exposing `$router` and `$route` properties to all components.
- Programmatic navigation uses named routes with parameter objects, while templates utilize `<router-link>` for declarative navigation.

## Frequently Asked Questions

### How does the quiz-app handle dynamic quiz IDs in routing?

The application defines a dynamic segment `:id` in the route path `/quiz/:id`, enabling the URL to capture specific quiz identifiers. Within the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component, this value is accessed via `this.$route.params.id`, allowing the component to load relevant quiz data based on the URL parameter.

### What routing mode does the AI-For-Beginners quiz-app use?

According to the source code in [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js), the router operates in **HTML5 history mode** (`mode: 'history'`), which produces clean URLs without hash fragments and requires server configuration to handle direct URL access to routes.

### How is the base URL configured for deployment flexibility?

The router configuration utilizes `process.env.BASE_URL` to dynamically set the base path, allowing the application to deploy under any sub-directory or domain path without modifying the router logic. This environment-driven approach supports flexible hosting scenarios.

### Where is the Vue Router instance created and integrated?

The router instance is instantiated in [`etc/quiz-app/src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/router/index.js) using `new Router()` and exported for consumption. Integration occurs in [`etc/quiz-app/src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/main.js), where the router is passed to the Vue constructor, making navigation utilities available across the component hierarchy.