Vue Routing
Vue Routing (Vue Router)
Routing in It is handled using Vue Router.
What is Routing in It?
Routing means:
Mapping URL paths to Vue components
Changing views without page refresh
Essential for SPA development
Example:
What is Vue Router?
Official routing library for It
Manages URLs & components
Supports:
Dynamic routes
Nested routes
Route guards
Lazy loading
Installing Vue Router
Vue 3
Basic Router Setup
router/index.js
Register Router in App
main.js
<router-view> and <router-link>
Router View
- Displays matched component
Router Link
- SPA navigation (no reload)
Dynamic Routing
Access Parameter
URL: /user/10
Nested Routes
URL:
/dashboard/profile/dashboard/settings
Programmatic Navigation
With Params
Route Guards (Security)
Global Guard
Used for:
Authentication
Authorization
Lazy Loading Routes
- Improves performance
History Modes
| Mode | Description |
|---|---|
createWebHistory() | Clean URLs (/about) |
createWebHashHistory() | Hash URLs (#/about) |
Interview Questions
Q1. What is <router-view>?
Renders matched component
Q2. Difference between router-link & <a>?router-link avoids reload
Q3. What are route guards?
Control navigation access
Summary
- Vue Router enables SPA navigation
- Routes map URL → components
<router-view>renders components- Supports dynamic & nested routes
- Route guards handle security
- Lazy loading improves speed
