feat(history): Remove event listeners when all apps are destroyed.

examples/basic/app.js

@@ -1,6 +1,30 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+// track number of popstate listeners
+// This should be replaced with something better
+let numPopstateListeners = 0
+const listenerCountDiv = document.createElement('div')
+listenerCountDiv.textContent = numPopstateListeners + ' popstate listeners'
+document.body.appendChild(listenerCountDiv)
+
+const originalAddEventListener = window.addEventListener
+const originalRemoveEventListener = window.removeEventListener
+window.addEventListener = function (name, handler) {
+  if (name === 'popstate') {
+    listenerCountDiv.textContent =
+      ++numPopstateListeners + ' popstate listeners'
+  }
+  return originalAddEventListener.apply(this, arguments)
+}
+window.removeEventListener = function (name, handler) {
+  if (name === 'popstate') {
+    listenerCountDiv.textContent =
+      --numPopstateListeners + ' popstate listeners'
+  }
+  return originalRemoveEventListener.apply(this, arguments)
+}
+
 // 1. Use plugin.
 // This installs <router-view> and <router-link>,
 // and injects $router and $route to all router-enabled child components
@@ -55,6 +79,7 @@ new Vue({
       <pre id="query-t">{{ $route.query.t }}</pre>
       <pre id="hash">{{ $route.hash }}</pre>
       <router-view class="view"></router-view>
+      <button v-on:click="teardown">Teardown app</button>
     </div>
   `,
 
@@ -66,6 +91,10 @@ new Vue({
       } else {
         this.$router.push('/', increment)
       }
+    },
+    teardown () {
+      this.$destroy()
+      this.$el.innerHTML = ''
     }
   }
 }).$mount('#app')

examples/hash-mode/app.js

@@ -1,6 +1,30 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+// track number of popstate listeners
+// This should be replaced with something better
+let numPopstateListeners = 0
+const listenerCountDiv = document.createElement('div')
+listenerCountDiv.textContent = numPopstateListeners + ' popstate listeners'
+document.body.appendChild(listenerCountDiv)
+
+const originalAddEventListener = window.addEventListener
+const originalRemoveEventListener = window.removeEventListener
+window.addEventListener = function (name, handler) {
+  if (name === 'popstate') {
+    listenerCountDiv.textContent =
+      ++numPopstateListeners + ' popstate listeners'
+  }
+  return originalAddEventListener.apply(this, arguments)
+}
+window.removeEventListener = function (name, handler) {
+  if (name === 'popstate') {
+    listenerCountDiv.textContent =
+      --numPopstateListeners + ' popstate listeners'
+  }
+  return originalRemoveEventListener.apply(this, arguments)
+}
+
 // 1. Use plugin.
 // This installs <router-view> and <router-link>,
 // and injects $router and $route to all router-enabled child components
@@ -46,6 +70,13 @@ new Vue({
       <pre id="query-t">{{ $route.query.t }}</pre>
       <pre id="hash">{{ $route.hash }}</pre>
       <router-view class="view"></router-view>
+      <button v-on:click="teardown">Teardown app</button>
     </div>
-  `
+  `,
+  methods: {
+    teardown () {
+      this.$destroy()
+      this.$el.innerHTML = ''
+    }
+  }
 }).$mount('#app')

src/history/base.js

@@ -23,13 +23,16 @@ export class History {
   readyCbs: Array<Function>
   readyErrorCbs: Array<Function>
   errorCbs: Array<Function>
+  listeners: Array<Function>
+  cleanupListeners: Function
 
   // implemented by sub-classes
   +go: (n: number) => void
   +push: (loc: RawLocation) => void
   +replace: (loc: RawLocation) => void
   +ensureURL: (push?: boolean) => void
   +getCurrentLocation: () => string
+  +setupListeners: Function
 
   constructor (router: Router, base: ?string) {
     this.router = router
@@ -41,6 +44,7 @@ export class History {
     this.readyCbs = []
     this.readyErrorCbs = []
     this.errorCbs = []
+    this.listeners = []
   }
 
   listen (cb: Function) {
@@ -208,6 +212,17 @@ export class History {
       hook && hook(route, prev)
     })
   }
+
+  setupListeners () {
+    // Default implementation is empty
+  }
+
+  teardownListeners () {
+    this.listeners.forEach(cleanupListener => {
+      cleanupListener()
+    })
+    this.listeners = []
+  }
 }
 
 function normalizeBase (base: ?string): string {

src/history/hash.js

@@ -20,31 +20,40 @@ export class HashHistory extends History {
   // this is delayed until the app mounts
   // to avoid the hashchange listener being fired too early
   setupListeners () {
+    if (this.listeners.length > 0) {
+      return
+    }
+
     const router = this.router
     const expectScroll = router.options.scrollBehavior
     const supportsScroll = supportsPushState && expectScroll
 
     if (supportsScroll) {
-      setupScroll()
+      this.listeners.push(setupScroll())
     }
 
-    window.addEventListener(
-      supportsPushState ? 'popstate' : 'hashchange',
-      () => {
-        const current = this.current
-        if (!ensureSlash()) {
-          return
-        }
-        this.transitionTo(getHash(), route => {
-          if (supportsScroll) {
-            handleScroll(this.router, route, current, true)
-          }
-          if (!supportsPushState) {
-            replaceHash(route.fullPath)
-          }
-        })
+    const handleRoutingEvent = () => {
+      const current = this.current
+      if (!ensureSlash()) {
+        return
       }
+      this.transitionTo(getHash(), route => {
+        if (supportsScroll) {
+          handleScroll(this.router, route, current, true)
+        }
+        if (!supportsPushState) {
+          replaceHash(route.fullPath)
+        }
+      })
+    }
+    const eventType = supportsPushState ? 'popstate' : 'hashchange'
+    window.addEventListener(
+      eventType,
+      handleRoutingEvent
     )
+    this.listeners.push(() => {
+      window.removeEventListener(eventType, handleRoutingEvent)
+    })
   }
 
   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {

src/history/html5.js

@@ -8,24 +8,37 @@ import { setupScroll, handleScroll } from '../util/scroll'
 import { pushState, replaceState, supportsPushState } from '../util/push-state'
 
 export class HTML5History extends History {
+  +initLocation: string
+
   constructor (router: Router, base: ?string) {
     super(router, base)
 
+    this.initLocation = getLocation(this.base)
+  }
+
+  setupListeners () {
+    if (this.listeners.length > 0) {
+      return
+    }
+
+    const router = this.router
     const expectScroll = router.options.scrollBehavior
     const supportsScroll = supportsPushState && expectScroll
 
     if (supportsScroll) {
-      setupScroll()
+      this.listeners.push(setupScroll())
     }
 
-    const initLocation = getLocation(this.base)
-    window.addEventListener('popstate', e => {
+    const handleRoutingEvent = () => {
+      const expectScroll = router.options.scrollBehavior
+      const supportsScroll = supportsPushState && expectScroll
+
       const current = this.current
 
       // Avoiding first `popstate` event dispatched in some browsers but first
       // history route not updated since async guard at the same time.
       const location = getLocation(this.base)
-      if (this.current === START && location === initLocation) {
+      if (this.current === START && location === this.initLocation) {
         return
       }
 
@@ -34,6 +47,10 @@ export class HTML5History extends History {
           handleScroll(router, route, current, true)
         }
       })
+    }
+    window.addEventListener('popstate', handleRoutingEvent)
+    this.listeners.push(() => {
+      window.removeEventListener('popstate', handleRoutingEvent)
     })
   }
 

src/index.js

@@ -98,6 +98,12 @@ export default class VueRouter {
       // ensure we still have a main app or null if no apps
       // we do not release the router so it can be reused
       if (this.app === app) this.app = this.apps[0] || null
+
+      if (this.apps.length === 0) {
+        // clean up event listeners
+        // https://github.com/vuejs/vue-router/issues/2341
+        this.history.teardownListeners()
+      }
     })
 
     // main app previously initialized
@@ -110,18 +116,10 @@ export default class VueRouter {
 
     const history = this.history
 
-    if (history instanceof HTML5History) {
-      history.transitionTo(history.getCurrentLocation())
-    } else if (history instanceof HashHistory) {
-      const setupHashListener = () => {
-        history.setupListeners()
-      }
-      history.transitionTo(
-        history.getCurrentLocation(),
-        setupHashListener,
-        setupHashListener
-      )
+    const setupListeners = () => {
+      history.setupListeners()
     }
+    history.transitionTo(history.getCurrentLocation(), setupListeners, setupListeners)
 
     history.listen(route => {
       this.apps.forEach((app) => {

src/util/scroll.js

@@ -19,12 +19,10 @@ export function setupScroll () {
   const stateCopy = extend({}, window.history.state)
   stateCopy.key = getStateKey()
   window.history.replaceState(stateCopy, '', absolutePath)
-  window.addEventListener('popstate', e => {
-    saveScrollPosition()
-    if (e.state && e.state.key) {
-      setStateKey(e.state.key)
-    }
-  })
+  window.addEventListener('popstate', handlePopState)
+  return () => {
+    window.removeEventListener('popstate', handlePopState)
+  }
 }
 
 export function handleScroll (
@@ -86,6 +84,13 @@ export function saveScrollPosition () {
   }
 }
 
+function handlePopState (e) {
+  saveScrollPosition()
+  if (e.state && e.state.key) {
+    setStateKey(e.state.key)
+  }
+}
+
 function getScrollPosition (): ?Object {
   const key = getStateKey()
   if (key) {