1---
2title: Use Vue Router Library for Production Applications
3impact: LOW
4impactDescription: Simple hash routing lacks essential features for production SPAs; Vue Router provides navigation guards, lazy loading, and proper history management
5type: best-practice
6tags: [vue3, vue-router, spa, production, architecture]
7---
8 
9# Use Vue Router Library for Production Applications
10 
11**Impact: LOW** - While you can implement basic routing with hash changes and dynamic components, the official Vue Router library should be used for any production single-page application. It provides essential features like navigation guards, nested routes, lazy loading, and proper browser history integration that are tedious and error-prone to implement manually.
12 
13## Task Checklist
14 
15- [ ] Install Vue Router for production SPAs
16- [ ] Use simple routing only for learning or tiny prototypes
17- [ ] Leverage built-in features: guards, lazy loading, meta fields
18- [ ] Consider router-based state and data loading patterns
19 
20## When Simple Routing is Acceptable
21 
22```vue
23<!-- Only for: learning, prototypes, or micro-apps with 2-3 pages -->
24<script setup>
25import { ref, computed } from 'vue'
26import Home from './Home.vue'
27import About from './About.vue'
28 
29const routes = { '/': Home, '/about': About }
30const currentPath = ref(window.location.hash.slice(1) || '/')
31 
32window.addEventListener('hashchange', () => {
33  currentPath.value = window.location.hash.slice(1) || '/'
34})
35 
36const currentView = computed(() => routes[currentPath.value])
37</script>
38 
39<template>
40  <nav>
41    <a href="#/">Home</a>
42    <a href="#/about">About</a>
43  </nav>
44  <component :is="currentView" />
45</template>
46```
47 
48## Why Vue Router for Production
49 
50### Features You'd Have to Implement Manually
51 
52| Feature | Simple Routing | Vue Router |
53|---------|---------------|------------|
54| Navigation guards | Manual, error-prone | Built-in, composable |
55| Nested routes | Complex to implement | Native support |
56| Route params | Parse manually | Automatic extraction |
57| Lazy loading | DIY with dynamic imports | Built-in with code splitting |
58| History mode (clean URLs) | Requires server config + manual | Built-in |
59| Scroll behavior | Manual | Configurable |
60| Route transitions | DIY | Integrated with Transition |
61| Active link styling | Manual class toggling | `router-link-active` class |
62| Programmatic navigation | `location.hash = ...` | `router.push()`, `router.replace()` |
63| Route meta fields | N/A | Built-in |
64 
65## Production Setup with Vue Router
66 
67```javascript
68// router/index.js
69import { createRouter, createWebHistory } from 'vue-router'
70 
71const routes = [
72  {
73    path: '/',
74    name: 'Home',
75    component: () => import('@/views/Home.vue'),  // Lazy loaded
76    meta: { requiresAuth: false }
77  },
78  {
79    path: '/dashboard',
80    name: 'Dashboard',
81    component: () => import('@/views/Dashboard.vue'),
82    meta: { requiresAuth: true },
83    children: [
84      {
85        path: 'settings',
86        name: 'Settings',
87        component: () => import('@/views/Settings.vue')
88      }
89    ]
90  },
91  {
92    path: '/users/:id',
93    name: 'UserProfile',
94    component: () => import('@/views/UserProfile.vue'),
95    props: true  // Pass params as props
96  },
97  {
98    path: '/:pathMatch(.*)*',
99    name: 'NotFound',
100    component: () => import('@/views/NotFound.vue')
101  }
102]
103 
104const router = createRouter({
105  history: createWebHistory(),
106  routes,
107  scrollBehavior(to, from, savedPosition) {
108    return savedPosition || { top: 0 }
109  }
110})
111 
112// Global navigation guard
113router.beforeEach((to, from) => {
114  if (to.meta.requiresAuth && !isAuthenticated()) {
115    return { name: 'Login', query: { redirect: to.fullPath } }
116  }
117})
118 
119export default router
120```
121 
122```javascript
123// main.js
124import { createApp } from 'vue'
125import App from './App.vue'
126import router from './router'
127 
128createApp(App)
129  .use(router)
130  .mount('#app')
131```
132 
133```vue
134<!-- App.vue -->
135<template>
136  <nav>
137    <router-link to="/">Home</router-link>
138    <router-link to="/dashboard">Dashboard</router-link>
139  </nav>
140 
141  <router-view v-slot="{ Component }">
142    <transition name="fade" mode="out-in">
143      <component :is="Component" />
144    </transition>
145  </router-view>
146</template>
147```
148 
149## Modern Vue Router Features (2025+)
150 
151```javascript
152// Data Loading API (Vue Router 4.2+)
153const routes = [
154  {
155    path: '/users/:id',
156    component: UserProfile,
157    // Load data at route level
158    loader: async (route) => {
159      return { user: await fetchUser(route.params.id) }
160    }
161  }
162]
163 
164// View Transitions API integration
165const router = createRouter({
166  // Enable native browser view transitions
167  // Requires browser support (Chrome 111+)
168})
169```
170 
171## Key Points
172 
1731. **Use Vue Router for any app beyond a prototype** - The features are essential
1742. **Simple routing is for learning** - Understand the concepts, then use the library
1753. **Lazy loading is critical for bundle size** - Vue Router makes it trivial
1764. **Navigation guards prevent security issues** - Hard to get right manually
1775. **History mode requires Vue Router** - Clean URLs need proper handling
1786. **New features keep coming** - Data Loading API, View Transitions
179 
180## Reference
181- [Vue.js Routing Guide](https://vuejs.org/guide/scaling-up/routing.html)
182- [Vue Router Documentation](https://router.vuejs.org/)
183- [Vue Router Getting Started](https://router.vuejs.org/guide/)
184