// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';
import NotFound from '../views/NotFound.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
  { path: '/:pathMatch(.*)*', component: NotFound },
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
});


// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { router } from './router';

createApp(App).use(router).mount('#app');


<!-- src/App.vue -->
<script setup>
import { RouterView, RouterLink } from 'vue-router';
</script>

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/contact">Contact</RouterLink>
  </nav>
  <RouterView />
</template>


<!-- src/views/Home.vue (About/Contact/NotFound follow the same shape) -->
<template>
  <h1>Home</h1>
</template>

<!--
  Notes:
  - app.use(router) registers Vue Router as a plugin — the same
    pattern Pinia uses in the next chapter.
  - <RouterView /> is the outlet; the nav stays put around it on every
    page, with RouterLink getting an active class automatically.
  - /:pathMatch(.*)* is the catch-all route, listed last, so it only
    matches URLs nothing above it did.
-->