fix(router): unique first navigation with multi app

vuejs · May 7, 2020 · 33172af · 33172af
1 parent 30da0b2
commit 33172af
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/e2e/multi-app/index.ts b/e2e/multi-app/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from '../../src'
 import { RouteComponent } from '../../src/types'
-import { createApp, ref, watchEffect } from 'vue'
+import { createApp, ref, watchEffect, App } from 'vue'
 
 const Home: RouteComponent = {
   template: `<div class="home">Home</div>`,
@@ -54,9 +54,15 @@ router.beforeEach((to, from, next) => {
 
 let looper = [1, 2, 3]
 
-let apps = looper.map(i =>
-  createApp({
-    template: `
+let apps: Array<App | null> = [null, null, null]
+
+looper.forEach((n, i) => {
+  let mountBtn = document.getElementById('mount' + n)!
+  let unmountBtn = document.getElementById('unmount' + n)!
+
+  mountBtn.addEventListener('click', () => {
+    let app = (apps[i] = createApp({
+      template: `
     <div id="app-${i}">
       <ul>
         <li><router-link to="/">Home</router-link></li>
@@ -67,22 +73,13 @@ let apps = looper.map(i =>
       <router-view></router-view>
     </div>
   `,
-  })
-)
-
-looper.forEach((n, i) => {
-  let mountBtn = document.getElementById('mount' + n)!
-  let unmountBtn = document.getElementById('unmount' + n)!
-
-  let app = apps[i]
-
-  app.use(router)
-
-  mountBtn.addEventListener('click', () => {
+    }))
+    app.use(router)
     app.mount('#app-' + n)
   })
 
   unmountBtn.addEventListener('click', () => {
-    app.unmount('#app-' + n)
+    let app = apps[i]
+    app && app.unmount('#app-' + n)
   })
 })
diff --git a/e2e/specs/multi-app.js b/e2e/specs/multi-app.js
@@ -12,9 +12,6 @@ module.exports = {
     browser
       .url(baseURL)
       .assert.urlEquals(baseURL + '/')
-      .assert.containsText('#popcount', '1')
-      // TODO:
-      // .assert.containsText('#guardcount', '1')
 
       // mount multiple apps and expect to have one listener only
       .click('#mount1')
@@ -23,6 +20,8 @@ module.exports = {
       .waitForElementPresent('#app-1 > *', 1000)
       .waitForElementPresent('#app-2 > *', 1000)
       .waitForElementPresent('#app-3 > *', 1000)
+      .assert.containsText('#popcount', '1')
+      .assert.containsText('#guardcount', '1')
 
       // they should all be displaying the home page
       .assert.containsText('#app-1 .home', 'Home')
@@ -67,6 +66,13 @@ module.exports = {
       .assert.containsText('#app-2 .user', 'User 2')
       .assert.containsText('#app-3 .user', 'User 2')
 
+      // unmounting apps should end up removing the popstate listener
+      // .click('#unmount1')
+      // .click('#unmount2')
+      // .click('#unmount3')
+      // TODO: we need a way to hook into unmount
+      // .assert.containsText('#popcount', '0')
+
       .end()
   },
 }
diff --git a/src/install.ts b/src/install.ts
@@ -63,6 +63,10 @@ declare module '@vue/runtime-core' {
   }
 }
 
+// used for the initial navigation client side to avoid pushing multiple times
+// when the router is used in multiple apps
+let installed: boolean | undefined
+
 export function applyRouterPlugin(app: App, router: Router) {
   app.component('RouterLink', RouterLink)
   app.component('RouterView', RouterView)
@@ -76,7 +80,12 @@ export function applyRouterPlugin(app: App, router: Router) {
   // this initial navigation is only necessary on client, on server it doesn't
   // make sense because it will create an extra unnecessary navigation and could
   // lead to problems
-  if (isBrowser && router.currentRoute.value === START_LOCATION_NORMALIZED) {
+  if (
+    isBrowser &&
+    !installed &&
+    router.currentRoute.value === START_LOCATION_NORMALIZED
+  ) {
+    installed = true
     router.push(router.history.location.fullPath).catch(err => {
       if (__DEV__)
         console.error('Unhandled error when starting the router', err)