How to use Vue Router
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using Vue Router enables single-page application navigation with dynamic route management, providing seamless user experiences without full page reloads. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented Vue Router extensively in enterprise applications and complex user interfaces. From my expertise, the most effective approach is configuring routes with components, using router-link for navigation, and router-view for component rendering. This pattern provides declarative routing that integrates seamlessly with Vue’s reactive system and component architecture.
Configure routes with components and use router-link for navigation and router-view for dynamic component rendering.
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
{ path: '/user/:id', name: 'User', component: () => import('@/views/User.vue') }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
<!-- App.vue -->
<template>
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view />
</div>
</template>
Here createRouter() configures the router with route definitions that map paths to components. The router-link component creates navigation links that handle route changes without page reloads, while router-view renders the matched component for the current route. Dynamic imports enable code splitting for better performance, and route parameters like :id allow passing data through URLs.
Best Practice Note:
This is the same approach we use in CoreUI Vue applications for building complex dashboards, admin interfaces, and multi-page user experiences. Always use lazy loading with dynamic imports for route components to optimize bundle size and improve initial load performance in production applications.
