What it is
Vue Router is the official router for Vue.js, enabling navigation between components and views in a Vue application. It provides declarative routing, nested routes, dynamic route matching, and navigation guards.
Vue Router allows you to define routes mapping URLs to components. You can use `<router-link>` for navigation and `<router-view>` to render the matched component. It supports nested routes, dynamic segments, programmatic navigation, and route guards for authentication or authorization.
Installation
npm install vue-routerGetting started
The smallest useful thing you can do with it, and what each part means.
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');<template>
<nav>
<router-link to='/'>Home</router-link>
<router-link to='/about'>About</router-link>
</nav>
<router-view></router-view>
</template>Advanced usage
Where the library earns its place over a simpler alternative.
const routes = [
{ path: '/user/:id', component: User }
];
// Accessing parameter in component
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id);
</script>const routes = [
{ path: '/dashboard', component: Dashboard, children: [
{ path: 'stats', component: Stats },
{ path: 'settings', component: Settings }
]}
];router.beforeEach((to, from, next) => {
const isAuthenticated = false;
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
function goHome() {
router.push('/');
}
</script>
<button @click="goHome">Go Home</button>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- NavigationDuplicated
- Occurs when trying to navigate to the current route. Use `router.push()` with a catch or check if the route is different.
- 404 Page Not Found
- Add a wildcard route (`path: '/:pathMatch(.*)*'`) to display a NotFound component for unmatched URLs.
- Dynamic parameter undefined
- Ensure the route parameter is correctly defined and passed in the URL.
Best practices
- Use `createWebHistory()` for clean URLs without hashes in production.
- Keep route definitions modular and organize them in a separate router file.
- Use nested routes for complex layouts with multiple sub-components.
- Use meta fields to store route-specific information like authentication requirements.
- Leverage navigation guards to protect sensitive routes.
Background
Why it exists, and what it was reacting to.
Vue Router was created by the Vue.js core team to handle routing in single-page applications (SPAs). It integrates tightly with Vue's reactive system, allowing developers to easily manage navigation, URL parameters, and programmatic routing with minimal setup.