What is Vue Router and how does client-side routing work?
Understand Vue Router and client-side routing: mapping URLs to components, router-view and router-link, history vs hash mode, dynamic params, and lazy loading.
Expected Interview Answer
Vue Router is the official routing library for Vue that maps URLs to components, letting a single-page app swap views based on the path without a full page reload. Client-side routing means JavaScript intercepts navigation, updates the URL, and renders the matching component in place rather than requesting a new HTML document from the server.
You define routes that pair a path with a component and render matches inside a router-view outlet, navigating with router-link or programmatically via router.push. Under the hood the router uses either HTML5 history mode (clean URLs via the History API) or hash mode, listening for URL changes to render the right component. Because only the changed view updates, navigation is fast and app state is preserved, though it requires server fallback configuration so deep links resolve to the app.
- Instant view changes with no full-page reload
- Preserves application state across navigations
- Declarative router-link plus programmatic router.push navigation
- Supports dynamic and nested routes with URL parameters
- Enables lazy-loaded route components for smaller initial bundles
AI Mentor Explanation
Client-side routing is like a stadium's big screen switching between camera angles instantly on request — bowler cam, boundary cam, replay — while the match keeps running. Vue Router is the control desk mapping each button to a feed, so the crowd sees a new view immediately without the whole broadcast restarting from the opening ceremony.
Step-by-Step Explanation
Step 1
Install and create the router
Add vue-router and call createRouter with a history mode such as createWebHistory.
Step 2
Define routes
Provide an array of route records, each pairing a path with a component to render.
Step 3
Mount router-view
Place a router-view outlet in the app where the matched route component should appear.
Step 4
Navigate declaratively
Use router-link for links so the router intercepts clicks instead of triggering full reloads.
Step 5
Navigate programmatically
Call router.push or router.replace in code, and read route params via useRoute for dynamic paths.
What Interviewer Expects
- Definition of Vue Router as URL-to-component mapping
- Explanation of client-side routing versus server round-trips
- Knowledge of history mode versus hash mode
- Use of router-view, router-link, and router.push
- Awareness of dynamic params and lazy-loaded route components
Common Mistakes
- Confusing client-side routing with server-side rendering
- Using anchor tags instead of router-link, causing full page reloads
- Forgetting the server fallback so deep links 404 in history mode
- Reading route params from the URL string instead of useRoute
- Not lazy-loading routes, bloating the initial bundle
Best Answer (HR Friendly)
“Vue Router is the tool that decides which part of a Vue app to show for each web address, so clicking a link swaps the view instantly instead of loading a whole new page. It makes single-page apps feel fast because only the changing section updates while everything else stays put.”
Code Example
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/user/:id', component: () => import('./views/User.vue') } // lazy-loaded
]
export const router = createRouter({
history: createWebHistory(),
routes
})<template>
<router-link to="/">Home</router-link>
<router-view /> <!-- matched component renders here -->
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function goToUser(id) {
router.push(`/user/${id}`) // programmatic navigation
}
</script>Follow-up Questions
- What is the difference between history mode and hash mode?
- How do you read dynamic route parameters with useRoute?
- How does lazy-loading route components improve performance?
- Why do deep links 404 in history mode without server configuration?
- How do nested routes and nested router-view outlets work?
MCQ Practice
1. In client-side routing, what happens when a user navigates to a new route?
Client-side routing intercepts navigation and renders the matched component in place without a full-page reload, preserving app state.
2. Which element serves as the outlet where a matched route component is rendered?
<router-view> is the outlet that renders whichever component matches the current route; <router-link> only creates navigation links.
3. Why can deep links return 404 in HTML5 history mode?
History mode uses real paths, so the server must be configured to return the SPA's index.html for unknown paths, otherwise it responds 404.
Flash Cards
What is Vue Router? — The official library mapping URLs to components so an SPA swaps views without full reloads.
Client-side routing — JS intercepts navigation, updates the URL, and renders the matching component in place.
router-view vs router-link — router-view renders the matched component; router-link creates intercepted navigation links.
Programmatic navigation — Call router.push or router.replace from code to change routes.
History mode caveat — The server must fall back to index.html or deep links will 404.