feat: add a default component for nested routes (vuejs#2105)

Author: Jared Deckard

examples/nested-routes/app.js

@@ -80,7 +80,14 @@ const router = new VueRouter({
 
         { path: 'quy/:quyId', component: Quy },
 
-        { name: 'zap', path: 'zap/:zapId?', component: Zap }
+        { name: 'zap', path: 'zap/:zapId?', component: Zap },
+
+        {
+          path: 'wrap',
+          children: [
+            { path: 'foo', component: Foo }
+          ]
+        }
       ]
     }
   ]
@@ -103,6 +110,7 @@ new Vue({
         <li><router-link :to="{ params: { zapId: 2 }}">{ params: { zapId: 2 }} (relative params)</router-link></li>
         <li><router-link to="/parent/qux/1/quux">/parent/qux/1/quux</router-link></li>
         <li><router-link to="/parent/qux/2/quux">/parent/qux/2/quux</router-link></li>
+        <li><router-link to="/parent/wrap/foo">/parent/wrap/foo</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/components/pass.js

@@ -0,0 +1,7 @@
+import RouterView from './view'
+
+export default {
+  name: 'PassThrough',
+  components: { RouterView },
+  template: '<router-view />'
+}

src/create-route-map.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import Regexp from 'path-to-regexp'
+import PassThrough from './components/pass'
 import { cleanPath } from './util/path'
 import { assert, warn } from './util/warn'
 
@@ -109,12 +110,16 @@ function addRouteRecord (
         )
       }
     }
-    route.children.forEach(child => {
+    const children = route.children.map(child => {
       const childMatchAs = matchAs
         ? cleanPath(`${matchAs}/${child.path}`)
         : undefined
-      addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
+      return addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
     })
+    // Allow nested child routes to render inside routes without a component.
+    if (children.some(child => child.components.default)) {
+      record.components.default = record.components.default || PassThrough
+    }
   }
 
   if (!pathMap[record.path]) {
@@ -161,6 +166,8 @@ function addRouteRecord (
       )
     }
   }
+
+  return record
 }
 
 function compileRouteRegex (

test/e2e/specs/nested-routes.js

@@ -9,7 +9,7 @@ module.exports = {
     browser
       .url('http://localhost:8080/nested-routes/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 11)
+      .assert.count('li a', 12)
       .assert.urlEquals('http://localhost:8080/nested-routes/parent')
       .assert.containsText('.view', 'Parent')
       .assert.containsText('.view', 'default')
@@ -99,6 +99,11 @@ module.exports = {
       .click('.nested-child a')
       .assert.urlEquals('http://localhost:8080/nested-routes/parent/qux/2/quuy')
 
+      .click('li:nth-child(12) a')
+      .assert.urlEquals('http://localhost:8080/nested-routes/parent/wrap/foo')
+      .assert.containsText('.view', 'Parent')
+      .assert.containsText('.view', 'foo')
+
       // check initial visit
       .url('http://localhost:8080/nested-routes/parent/foo')
       .waitForElementVisible('#app', 1000)