fix: prevent memory leaks by removing app references (#2706)

Fix #2639

Author: posva

src/index.js

@@ -89,7 +89,19 @@ export default class VueRouter {
 
     this.apps.push(app)
 
-    // main app already initialized.
+    // set up app destroyed handler
+    // https://github.com/vuejs/vue-router/issues/2639
+    app.$once('hook:destroyed', () => {
+      // clean out app from this.apps array once destroyed
+      const index = this.apps.indexOf(app)
+      if (index > -1) this.apps.splice(index, 1)
+      // 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
+    })
+
+    // main app previously initialized
+    // return as we don't need to set up new history listener
     if (this.app) {
       return
     }

test/unit/specs/api.spec.js

@@ -1,4 +1,5 @@
 import Router from '../../../src/index'
+import Vue from 'vue'
 
 describe('router.onReady', () => {
   it('should work', done => {
@@ -185,3 +186,97 @@ describe('router.push/replace callbacks', () => {
     })
   })
 })
+
+describe('router app destroy handling', () => {
+  Vue.use(Router)
+
+  let router, app1, app2, app3
+
+  beforeEach(() => {
+    router = new Router({
+      mode: 'abstract',
+      routes: [
+        { path: '/', component: { name: 'A' }}
+      ]
+    })
+
+    // Add main app
+    app1 = new Vue({
+      router,
+      render (h) { return h('div') }
+    })
+
+    // Add 2nd app
+    app2 = new Vue({
+      router,
+      render (h) { return h('div') }
+    })
+
+    // Add 3rd app
+    app3 = new Vue({
+      router,
+      render (h) { return h('div') }
+    })
+  })
+
+  it('all apps point to the same router instance', () => {
+    expect(app1.$router).toBe(app2.$router)
+    expect(app2.$router).toBe(app3.$router)
+  })
+
+  it('should have all 3 registered apps', () => {
+    expect(app1.$router.app).toBe(app1)
+    expect(app1.$router.apps.length).toBe(3)
+    expect(app1.$router.apps[0]).toBe(app1)
+    expect(app1.$router.apps[1]).toBe(app2)
+    expect(app1.$router.apps[2]).toBe(app3)
+  })
+
+  it('should remove 2nd destroyed app from this.apps', () => {
+    app2.$destroy()
+    expect(app1.$router.app).toBe(app1)
+    expect(app1.$router.apps.length).toBe(2)
+    expect(app1.$router.apps[0]).toBe(app1)
+    expect(app1.$router.apps[1]).toBe(app3)
+  })
+
+  it('should remove 1st destroyed app and replace current app', () => {
+    app1.$destroy()
+    expect(app3.$router.app).toBe(app2)
+    expect(app3.$router.apps.length).toBe(2)
+    expect(app3.$router.apps[0]).toBe(app2)
+    expect(app1.$router.apps[1]).toBe(app3)
+  })
+
+  it('should remove all apps', () => {
+    app1.$destroy()
+    app3.$destroy()
+    app2.$destroy()
+    expect(app3.$router.app).toBe(null)
+    expect(app3.$router.apps.length).toBe(0)
+  })
+
+  it('should keep current app if already defined', () => {
+    const app4 = new Vue({
+      router,
+      render (h) { return h('div') }
+    })
+    expect(app4.$router.app).toBe(app1)
+    expect(app4.$router.apps.length).toBe(4)
+    expect(app4.$router.apps[3]).toBe(app4)
+  })
+
+  it('should replace current app if none is assigned when creating the app', () => {
+    app1.$destroy()
+    app3.$destroy()
+    app2.$destroy()
+    const app4 = new Vue({
+      router,
+      render (h) { return h('div') }
+    })
+    expect(router.app).toBe(app4)
+    expect(app4.$router).toBe(router)
+    expect(app4.$router.apps.length).toBe(1)
+    expect(app4.$router.apps[0]).toBe(app4)
+  })
+})