1---
2title: Simple Hash Routing Requires Event Listener Cleanup
3impact: MEDIUM
4impactDescription: When implementing basic routing without Vue Router, forgetting to remove hashchange listeners causes memory leaks and multiple handler execution
5type: gotcha
6tags: [vue3, routing, events, memory-leak, cleanup]
7---
8 
9# Simple Hash Routing Requires Event Listener Cleanup
10 
11**Impact: MEDIUM** - When implementing basic client-side routing without Vue Router (using hash-based routing with `hashchange` events), you must clean up event listeners when the component unmounts. Failure to do so causes memory leaks and can result in multiple handlers firing after the component is recreated.
12 
13## Task Checklist
14 
15- [ ] Store event listener reference for cleanup
16- [ ] Use onUnmounted to remove event listener
17- [ ] Consider using Vue Router instead for production apps
18- [ ] Test component mount/unmount cycles
19 
20## The Problem
21 
22```vue
23<script setup>
24import { ref, computed } from 'vue'
25import Home from './Home.vue'
26import About from './About.vue'
27 
28const routes = {
29  '/': Home,
30  '/about': About
31}
32 
33const currentPath = ref(window.location.hash)
34 
35// BUG: Event listener is never removed!
36// Each time this component mounts, a NEW listener is added
37// After mounting 5 times, you have 5 listeners running
38window.addEventListener('hashchange', () => {
39  currentPath.value = window.location.hash
40})
41 
42const currentView = computed(() => {
43  return routes[currentPath.value.slice(1) || '/']
44})
45</script>
46```
47 
48**What happens:**
491. Component mounts, adds listener
502. Component unmounts (e.g., route change, v-if toggle)
513. Component mounts again, adds ANOTHER listener
524. Now TWO listeners respond to each hash change
535. Eventually causes performance issues and memory leaks
54 
55## Solution: Proper Cleanup with onUnmounted
56 
57```vue
58<script setup>
59import { ref, computed, onUnmounted } from 'vue'
60import Home from './Home.vue'
61import About from './About.vue'
62import NotFound from './NotFound.vue'
63 
64const routes = {
65  '/': Home,
66  '/about': About
67}
68 
69const currentPath = ref(window.location.hash)
70 
71// Store handler reference for cleanup
72function handleHashChange() {
73  currentPath.value = window.location.hash
74}
75 
76// Add listener
77window.addEventListener('hashchange', handleHashChange)
78 
79// CRITICAL: Remove listener on unmount
80onUnmounted(() => {
81  window.removeEventListener('hashchange', handleHashChange)
82})
83 
84const currentView = computed(() => {
85  return routes[currentPath.value.slice(1) || '/'] || NotFound
86})
87</script>
88```
89 
90## Solution: Using Options API
91 
92```vue
93<script>
94import Home from './Home.vue'
95import About from './About.vue'
96import NotFound from './NotFound.vue'
97 
98const routes = {
99  '/': Home,
100  '/about': About
101}
102 
103export default {
104  data() {
105    return {
106      currentPath: window.location.hash
107    }
108  },
109 
110  computed: {
111    currentView() {
112      return routes[this.currentPath.slice(1) || '/'] || NotFound
113    }
114  },
115 
116  mounted() {
117    // Store bound handler for cleanup
118    this.hashHandler = () => {
119      this.currentPath = window.location.hash
120    }
121    window.addEventListener('hashchange', this.hashHandler)
122  },
123 
124  beforeUnmount() {
125    // Clean up
126    window.removeEventListener('hashchange', this.hashHandler)
127  }
128}
129</script>
130```
131 
132## Solution: Composable for Reusable Hash Routing
133 
134```javascript
135// composables/useHashRouter.js
136import { ref, computed, onUnmounted } from 'vue'
137 
138export function useHashRouter(routes, notFoundComponent = null) {
139  const currentPath = ref(window.location.hash)
140 
141  function handleHashChange() {
142    currentPath.value = window.location.hash
143  }
144 
145  // Setup
146  window.addEventListener('hashchange', handleHashChange)
147 
148  // Cleanup - handled automatically when component unmounts
149  onUnmounted(() => {
150    window.removeEventListener('hashchange', handleHashChange)
151  })
152 
153  const currentView = computed(() => {
154    const path = currentPath.value.slice(1) || '/'
155    return routes[path] || notFoundComponent
156  })
157 
158  function navigate(path) {
159    window.location.hash = path
160  }
161 
162  return {
163    currentPath,
164    currentView,
165    navigate
166  }
167}
168```
169 
170```vue
171<!-- Usage -->
172<script setup>
173import { useHashRouter } from '@/composables/useHashRouter'
174import Home from './Home.vue'
175import About from './About.vue'
176import NotFound from './NotFound.vue'
177 
178const { currentView } = useHashRouter({
179  '/': Home,
180  '/about': About
181}, NotFound)
182</script>
183 
184<template>
185  <component :is="currentView" />
186</template>
187```
188 
189## When to Use Simple Routing vs Vue Router
190 
191| Use Simple Hash Routing | Use Vue Router |
192|------------------------|----------------|
193| Learning/prototyping | Production apps |
194| Very simple apps (2-3 pages) | Nested routes needed |
195| No build step available | Navigation guards needed |
196| Bundle size critical | Lazy loading needed |
197| Static hosting only | History mode (clean URLs) |
198 
199## Key Points
200 
2011. **Always clean up event listeners** - Use onUnmounted or beforeUnmount
2022. **Store handler reference** - Anonymous functions can't be removed
2033. **Consider Vue Router for real apps** - It handles cleanup automatically
2044. **Test unmount scenarios** - v-if toggling, hot module replacement
2055. **Composables help encapsulate cleanup logic** - Reusable and automatic
206 
207## Reference
208- [Vue.js Routing Documentation](https://vuejs.org/guide/scaling-up/routing.html)
209- [Vue Router Official Library](https://router.vuejs.org/)
210