Vue Router enables client-side navigation with routes mapped to components. It supports dynamic params, nested routes, and navigation guards for auth and data loading. Routing impacts UX and data fetching; test guards, async navigation, and scroll restoration.
What is the Vue Router and how is it used for navigation?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Vue Router is an official library that enables navigation between different views or components in a Vue application. It transforms a Vue app into a Single-Page Application (SPA) by mapping URLs (routes) to specific components and handling transitions dynamically without reloading the page.
Installing Vue Router
To use Vue Router, install it with npm or yarn:
BASH
npm install vue-router
# or
yarn add vue-router
Defining Routes
Routes are defined as objects, where each route maps a URL path to a specific component.
JAVASCRIPT
// router.js
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;
Using the Router in Your App
Once defined, the router must be registered in the main Vue application instance.
JAVASCRIPT
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
Now your application can handle different pages without reloading. The <router-view> element acts as a placeholder that dynamically displays the active route’s component.
HTML
<template>
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
How Navigation Works
• <router-link> creates navigable links without refreshing the page.
• <router-view> displays the matched component for the current route.
• Vue Router automatically updates the browser’s history using the HTML5 History API.
Dynamic and Nested Routes
Vue Router supports dynamic routes (e.g., user profiles) and nested routes for hierarchical views.
JAVASCRIPT
{ path: '/user/:id', component: UserProfile }
Access dynamic parameters in the component using this.$route.params.id.
Programmatic Navigation
You can also navigate using JavaScript instead of router-link components:
JAVASCRIPT
this.$router.push('/about');
this.$router.replace('/');
Navigation Guards
Vue Router includes navigation guards (e.g., beforeEach) to control access to routes, often used for authentication or logging.
JAVASCRIPT
router.beforeEach((to, from, next) => {
if (to.path === '/admin' && !isLoggedIn()) {
next('/login');
} else {
next();
}
});
Advantages of Vue Router
- Enables navigation without page reloads.
- Supports nested, dynamic, and lazy-loaded routes.
- Integrates with browser history and back navigation.
- Works seamlessly with Vue’s reactivity system.
Think of Vue Router as the GPS of your application — it knows where you are, where you’re going, and updates the view without ever refreshing the page.
Practical scenario
Protect a dashboard route behind auth and redirect unauthenticated users to login.
Common pitfalls
- Forgetting to return/next in async guards.
- Triggering infinite redirect loops.
- Not handling scroll behavior on navigation.
Guards improve security but add complexity. Test navigation timing and back-button behavior.
Summary
Summary
- Vue Router maps URL paths to components for single-page navigation.
- Use <router-link> for navigation and <router-view> to display views.
- Supports dynamic, nested, and programmatic navigation.
- Navigation guards help manage route access and user flow.
Similar questions
Guides