Router Setup in Vue.js

From the Vue.js cheat sheet · Vue Router · verified Jul 2026

Router Setup

Setting up Vue Router

javascript
// router/index.js (Vue 3)
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
]

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

// main.js
app.use(router)
💡 Vue Router 4 for Vue 3, Vue Router 3 for Vue 2
⚡ Use lazy loading with import() for better performance
📌 History mode requires server configuration for production
🔥 Navigation guards control access to routes

More Vue.js tasks

Back to the full Vue.js cheat sheet