vue-router
🚦 The official router for Vue 2
The official URL routing library for Vue 2 that lets you build multi-screen web apps with fast, in-page navigation instead of full page reloads.
vue-router is the official routing library for Vue 2, the JavaScript framework for building web interfaces. Routing, in web development terms, means handling navigation — deciding which page or component to display when a user clicks a link or types a URL. Without a router, a web app would only show one screen and couldn't navigate between sections without doing a full page reload.
vue-router enables Single Page Applications (SPAs) — where the browser loads the app once and then swaps out content dynamically as the user navigates, giving a fast, app-like experience. It supports nested routes (a page within a page, like a settings panel with sub-tabs), route parameters (dynamic segments in URLs like /user/123), and query strings. It also provides animated transitions between views using Vue's built-in transition system, and navigation guards for controlling access (like blocking unauthenticated users from certain pages).
You would use this whenever you're building a Vue 2 web application that has multiple distinct screens or sections that users can navigate between. It handles both HTML5 history mode (clean URLs like /about) and hash mode (URLs like /#/about) with automatic fallback for older browsers. It's written in JavaScript and is maintained by the Vue.js team.
Where it fits
- Build a Vue 2 single-page app with multiple pages like Home, About, and Profile that navigate without reloading the browser.
- Create nested page layouts where a settings page has sub-pages like Profile, Security, and Notifications.
- Protect routes so only logged-in users can access certain pages using navigation guards.
- Support both clean URLs like /about and hash URLs like /#/about for older browser compatibility.