Vue Router

Routing with Vue Router

Vue Router renders components based on the URL for SPA navigation.

Vue Router 4 targets Vue 3 with a modern history API.

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/', component: Home }],
})

Minimal router creation.

Pieces

routes, router-view, router-link, guards

• Prefer Composition API + script setup.
• Use computed for derived UI.
• Keep side effects intentional.
• Practice in a small Vite app.

Vue Router Cheatsheet

Quick reference for patterns covered in this lesson.

Plugin Install

app.use(router) then place RouterView in App.

Common Mistakes

• Full page reloads via <a> for internal links.
• Forgetting history mode server fallbacks.

Key Takeaways

• Vue Router is important in Vue apps.
• Practice in SFCs.
• Prefer clear naming.
• Check Vue docs for details.