Vue 39: Vue Router Basics
easy⏱ 5 mincoursevue
createRouter, routes, and <router-view>
Vue Router is the official routing library for Vue. createRouter builds a router instance from a routes array — each entry maps a path to a component. Drop a <router-view> anywhere in your template and Vue Router renders whichever component matches the current path right there.
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHistory(), // real browser URL in production
routes,
});
app.use(router);
<router-link> for navigation
<router-link to="/path"> renders a real <a> tag and changes the route without a full page reload. Compare that to a plain <a href="/path">, which would reload the whole page — router-link keeps everything client-side.
Why createMemoryHistory here
This live preview runs inside a sandboxed iframe with no real, navigable URL bar, so createWebHistory() (or hash history) has nothing to attach to. We use createMemoryHistory() instead — it keeps the route stack in memory and behaves identically for push, <router-link>, guards, everything. A real app just swaps in createWebHistory(), exactly as shown in the concept code above.
Try it
Add a fourth route, /pricing, with its own component and a matching <router-link> in the nav. Click through all four links and watch <router-view> swap content instantly.