feat: add destroy method, remove event listener on destroy

Author: bailnl

src/history/base.js

@@ -23,6 +23,7 @@ export class History {
   readyCbs: Array<Function>
   readyErrorCbs: Array<Function>
   errorCbs: Array<Function>
+  removeEventListenerCbs: Array<Function>
 
   // implemented by sub-classes
   +go: (n: number) => void
@@ -41,6 +42,7 @@ export class History {
     this.readyCbs = []
     this.readyErrorCbs = []
     this.errorCbs = []
+    this.removeEventListenerCbs = []
   }
 
   listen (cb: Function) {
@@ -208,6 +210,10 @@ export class History {
       hook && hook(route, prev)
     })
   }
+
+  destroy () {
+    this.removeEventListenerCbs.forEach(cb => { cb() })
+  }
 }
 
 function normalizeBase (base: ?string): string {

src/history/hash.js

@@ -25,26 +25,30 @@ export class HashHistory extends History {
     const supportsScroll = supportsPushState && expectScroll
 
     if (supportsScroll) {
-      setupScroll()
+      const uninstall = setupScroll()
+      this.removeEventListenerCbs.push(uninstall)
     }
 
-    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 eventName = supportsPushState ? 'popstate' : 'hashchange'
+    const listener = () => {
+      const current = this.current
+      if (!ensureSlash()) {
+        return
       }
-    )
+      this.transitionTo(getHash(), route => {
+        if (supportsScroll) {
+          handleScroll(this.router, route, current, true)
+        }
+        if (!supportsPushState) {
+          replaceHash(route.fullPath)
+        }
+      })
+    }
+    window.addEventListener(eventName, listener)
+    const uninstall = () => {
+      window.removeEventListener(eventName, listener)
+    }
+    this.removeEventListenerCbs.push(uninstall)
   }
 
   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {

src/history/html5.js

@@ -15,11 +15,12 @@ export class HTML5History extends History {
     const supportsScroll = supportsPushState && expectScroll
 
     if (supportsScroll) {
-      setupScroll()
+      const uninstall = setupScroll()
+      this.removeEventListenerCbs.push(uninstall)
     }
 
     const initLocation = getLocation(this.base)
-    window.addEventListener('popstate', e => {
+    const listener = e => {
       const current = this.current
 
       // Avoiding first `popstate` event dispatched in some browsers but first
@@ -34,7 +35,12 @@ export class HTML5History extends History {
           handleScroll(router, route, current, true)
         }
       })
-    })
+    }
+    window.addEventListener('popstate', listener)
+    const uninstall = () => {
+      window.removeEventListener('popstate', listener)
+    }
+    this.removeEventListenerCbs.push(uninstall)
   }
 
   go (n: number) {

src/index.js

@@ -239,6 +239,10 @@ export default class VueRouter {
       this.history.transitionTo(this.history.getCurrentLocation())
     }
   }
+
+  destroy () {
+    this.history.destroy()
+  }
 }
 
 function registerHook (list: Array<any>, fn: Function): Function {

src/util/scroll.js

@@ -15,12 +15,17 @@ export function setupScroll () {
   const protocolAndPath = window.location.protocol + '//' + window.location.host
   const absolutePath = window.location.href.replace(protocolAndPath, '')
   window.history.replaceState({ key: getStateKey() }, '', absolutePath)
-  window.addEventListener('popstate', e => {
+  const listener = e => {
     saveScrollPosition()
     if (e.state && e.state.key) {
       setStateKey(e.state.key)
     }
-  })
+  }
+  window.addEventListener('popstate', listener)
+
+  return function uninstall () {
+    window.removeEventListener('popstate', listener)
+  }
 }
 
 export function handleScroll (