refactor(router-view): render children as placeholder

vuejs · Jun 4, 2019 · 7e659c9 · 7e659c9
1 parent 5b9cb7b
commit 7e659c9
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 0 deletions.
diff --git a/examples/placeholder/app.js b/examples/placeholder/app.js
@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Home = { template: '<div id="home">This is Home</div>' }
+const Header = { template: '<div id="header">This is Header</div>' }
+const Footer = { template: '<div id="footer">This is Footer</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    {
+      path: '/',
+      components: {
+        header: Header,
+        default: Home,
+        footer: Footer
+      }
+    }
+  ]
+})
+
+router.beforeEach((to, from, next) => {
+  setTimeout(() => {
+    next()
+  }, 1000)
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>router-view placeholder</h1>
+      <router-view name="header">
+        <div id="header-loading">Loading header...</div>
+      </router-view>
+      <router-view>
+        <div id="default-loading">Loading default...</div>
+      </router-view>
+      <router-view name="footer"></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/placeholder/index.html b/examples/placeholder/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/placeholder.js"></script>
diff --git a/src/components/view.js b/src/components/view.js
@@ -48,6 +48,15 @@ export default {
     // render empty node if no matched route
     if (!matched) {
       cache[name] = null
+
+      // The component child may act as the temporary placeholder
+      // up until the actual component from the route takes in place.
+      // Taking the first child because the actual component can only
+      // have one single element as the root anyway.
+      if (children && children.length === 1) {
+        return children[0]
+      }
+
       return h()
     }
 

diff --git a/test/e2e/specs/placeholder.js b/test/e2e/specs/placeholder.js
@@ -0,0 +1,22 @@
+module.exports = {
+  'placeholder': function (browser) {
+    browser
+      .url('http://localhost:8080/placeholder/')
+      .waitForElementVisible('#app', 1000)
+
+      // Assert that 2 elements exist
+      // because the last one doesn't have a placeholder
+      .assert.count('#app div', 2)
+      .assert.containsText('#header-loading', 'Loading header...')
+      .assert.containsText('#default-loading', 'Loading default...')
+
+      // When the timeout ends, assert if the components are there
+      .waitForElementVisible('#home', 1000)
+      .assert.count('.vue-router-placeholder', 0)
+      .assert.containsText('#header', 'This is Header')
+      .assert.containsText('#home', 'This is Home')
+      .assert.containsText('#footer', 'This is Footer')
+
+      .end()
+  }
+}