Vue RouterThe Official Router for Vue.js

🌟 Why Choose Vue Router? ​

Vue Router is the official client-side routing solution for Vue.js, designed specifically for building single-page applications (SPAs). It's not just a routing library—it's your essential companion for creating modern web applications.

✨ Core Features at a Glance ​

🛣️ Expressive Route Syntax ​

Define static and dynamic routes with an intuitive and powerful syntax. Whether it's simple page navigation or complex parameter passing, Vue Router makes it elegant and straightforward.

// Simple yet powerful route definitions
const routes = [
  { path: '/', component: Home },
  { path: '/user/:id', component: User },
  { path: '/user/:id/posts/:postId', component: UserPost },
  // Catch-all route for 404 pages
  { path: '/:pathMatch(.*)*', component: NotFound }
]

🛑 Fine-grained Navigation Control ​

Want to perform authentication checks when users navigate? Or remind users to save data before leaving a page? Vue Router's navigation guards give you complete control.

// Global navigation guard example
router.beforeEach(async (to, from) => {
  // Check if user is authenticated
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return '/login'
  }
})

🧱 Component-based Configuration ​

Each route corresponds to a component, making your application structure clear and maintainable. Component lazy loading, nested routes, named views—everything feels natural.

// Lazy loading for better performance
const routes = [
  {
    path: '/dashboard',
    component: () => import('./Dashboard.vue'),
    children: [
      { path: 'analytics', component: () => import('./Analytics.vue') },
      { path: 'settings', component: () => import('./Settings.vue') }
    ]
  }
]

🔌 Flexible History Modes ​

• HTML5 History Mode: Clean URLs, SEO-friendly (/user/123)
• Hash Mode: Best compatibility for all environments (/#/user/123)
• Memory Mode: Perfect for SSR and testing environments

🎚️ Precise Scroll Control ​

Take complete control over scroll position during page transitions. Return to top, maintain position, or scroll to specific elements—enhance user experience to the next level.

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

🌐 Automatic Encoding ​

Use Unicode characters directly in your code (like "你好"), and Vue Router automatically handles encoding issues.

🚀 Quick Start ​

Ready to begin your Vue Router journey?

📚 Learning Path ​

🏆 Why Developers Love Vue Router ​

"Vue Router increased my SPA development efficiency by 300%!" - Senior Frontend Engineer

• 🎨 Excellent Developer Experience: Intuitive API design with a gentle learning curve
• ⚡ Outstanding Performance: Code splitting and lazy loading make your app fly
• 🔧 Feature Complete: From simple routing to complex scenarios, one library handles all needs
• 🌍 Active Community: Rich ecosystem with reliable problem-solving support

🎁 Free Learning Resources ​

🌍 Community & Support ​

💎 Sponsor Support ​

Vue Router's continued development depends on community support:

🥇 Gold Sponsors ​

Thank you to our gold sponsors for supporting open source!

🥈 Silver Sponsors ​

Every contribution makes Vue Router better.