Route Configuration

Each route is a plain object with a path, component, optional name, meta, and children — easy to read and easy to extend.

4 min read Level 2/5 #vue#router#config

What you'll learn

Define a basic routes array
Add a 404 catch-all
Use named routes

A route is a small object. The full config is just a list of them — easy to type, easy to compose.

The Shape of a Route

import { createRouter, createWebHistory } from 'vue-router'
import Home from './pages/Home.vue'
import User from './pages/User.vue'
import NotFound from './pages/NotFound.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home, name: 'home' },
    { path: '/users/:id', component: User, name: 'user' },
    { path: '/:pathMatch(.*)*', component: NotFound },
  ],
})

The catch-all :pathMatch(.*)* matches anything that fell through and is the standard 404 route.

Named Routes

Naming routes decouples links from URLs. Change the path later and your links keep working.

<template>
  <router-link :to="{ name: 'user', params: { id: 42 } }">
    User 42
  </router-link>
</template>

Route meta

Attach arbitrary data per route — handy for guards, layouts, and titles.

{ path: '/admin', component: Admin, meta: { requiresAuth: true, title: 'Admin' } }

You’ll use meta.requiresAuth from a global guard in the next lessons.

Route Params & Query →