fix: push before creating Vue instance (#2713)

Fix #2712
vuejs · Apr 13, 2019 · 6974a6f · 6974a6f
1 parent a0c1c5e
commit 6974a6f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 1 deletion.
diff --git a/examples/lazy-loading-before-mount/app.js b/examples/lazy-loading-before-mount/app.js
@@ -0,0 +1,39 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Home = { template: '<div>Home</div>' }
+const Foo = () =>
+  new Promise(resolve => {
+    setTimeout(() =>
+      resolve({
+        template: `<div class="foo">This is Foo</div>`
+      })
+      , 10)
+  })
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/', component: Home },
+    // Just use them normally in the route config
+    { path: '/async', component: Foo }
+  ]
+})
+
+router.push('/async')
+
+document.getElementById('load-button').addEventListener('click', (event) => {
+  new Vue({
+    router,
+    template: `
+    <div id="app">
+      <h1>Async</h1>
+      <router-view class="view"></router-view>
+    </div>
+  `
+  }).$mount('#app')
+  event.target.remove()
+})
diff --git a/examples/lazy-loading-before-mount/index.html b/examples/lazy-loading-before-mount/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+
+<button id="load-button">Load</button>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/lazy-loading-before-mount.js"></script>
diff --git a/src/util/resolve-components.js b/src/util/resolve-components.js
@@ -30,7 +30,7 @@ export function resolveAsyncComponents (matched: Array<RouteRecord>): Function {
           match.components[key] = resolvedDef
           pending--
           if (pending <= 0) {
-            next()
+            next(to)
           }
         })
 

diff --git a/test/e2e/specs/lazy-loading-before-mount.js b/test/e2e/specs/lazy-loading-before-mount.js
@@ -0,0 +1,11 @@
+module.exports = {
+  'lazy loading before mount': function (browser) {
+    browser
+      .url('http://localhost:8080/lazy-loading-before-mount/')
+      // wait for the Foo component to be resolved
+      .click('#load-button')
+      .waitForElementVisible('.foo', 1000)
+      .assert.containsText('.view', 'This is Foo')
+      .end()
+  }
+}