Routing with Vue Router

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Build a route table
Use RouterLink and RouterView
Understand dynamic routes

Let's break it down simply

Vue Router is Vue's official client-side routing solution. createRouter maps URL paths to components, and RouterView renders whichever component matches. RouterLink updates the browser history without triggering a full page reload.

javascript

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

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: HomeView },
    { path: '/courses/:slug', name: 'course', component: CourseView, props: true }
  ]
})

You should see

/ → HomeView
/courses/vue → CourseView (slug: vue)

Try it yourself

Build three routes — Home, Courses, and Course Detail — and add navigation links.

Vue Router — Getting Started — Vue Router

Easy traps

Forgetting to call app.use(router)
Mixing up route params and path when calling router.push

Exercise

Build three routes — Home, Courses, and Course Detail — and add navigation links.

You'll know it worked when: / → HomeView /courses/vue → CourseView (slug: vue)