How to redirect routes in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Route redirects are essential for managing user navigation, handling legacy URLs, and controlling application flow in Vue applications. With over 25 years of experience in web development and as the creator of CoreUI, I’ve implemented redirect logic in countless enterprise applications. The most effective approach is using Vue Router’s built-in redirect property in route configurations for declarative redirects. This provides clean, maintainable redirect logic that works seamlessly with Vue’s routing system.
Use Vue Router’s redirect property in route configuration to automatically redirect users from one path to another.
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import Dashboard from './components/Dashboard.vue'
const routes = [
{ path: '/', redirect: '/dashboard' },
{ path: '/home', redirect: { name: 'dashboard' } },
{ path: '/dashboard', name: 'dashboard', component: Dashboard },
{
path: '/old-path/:id',
redirect: to => `/new-path/${to.params.id}`
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
This example shows three redirect patterns: simple string redirect from root to dashboard, named route redirect using the route name, and dynamic redirect using a function that accesses route parameters. The function-based redirect receives the target route object and returns the new path, allowing for complex redirect logic based on parameters, query strings, or other conditions.
Best Practice Note:
This redirect pattern is used throughout CoreUI Vue templates for seamless user experience and proper URL structure. Always use named routes for internal redirects to maintain flexibility when route paths change.
