support nested children for aliased paths (fix #987)

Author: yyx990803

examples/route-alias/app.js

@@ -8,6 +8,8 @@ const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }
 const Baz = { template: '<div>baz</div>' }
 const Default = { template: '<div>default</div>' }
+const Nested = { template: '<router-view/>' }
+const NestedFoo = { template: '<div>nested foo</div>' }
 
 const router = new VueRouter({
   mode: 'history',
@@ -22,7 +24,13 @@ const router = new VueRouter({
         // multiple aliases
         { path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] },
         // default child route with empty string as alias.
-        { path: 'default', component: Default, alias: '' }
+        { path: 'default', component: Default, alias: '' },
+        // nested alias
+        { path: 'nested', component: Nested, alias: 'nested-alias',
+          children: [
+            { path: 'foo', component: NestedFoo }
+          ]
+        }
       ]
     }
   ]
@@ -53,6 +61,10 @@ new Vue({
         <li><router-link to="/home">
           /home (renders /home/default)
         </router-link></li>
+
+        <li><router-link to="/home/nested-alias/foo">
+          /home/nested-alias/foo (renders /home/nested/foo)
+        </router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/create-route-map.js

@@ -66,23 +66,35 @@ function addRouteRecord (
       }
     }
     route.children.forEach(child => {
-      addRouteRecord(pathMap, nameMap, child, record)
+      const childMatchAs = matchAs
+        ? cleanPath(`${matchAs}/${child.path}`)
+        : undefined
+      addRouteRecord(pathMap, nameMap, child, record, childMatchAs)
     })
   }
 
   if (route.alias !== undefined) {
     if (Array.isArray(route.alias)) {
       route.alias.forEach(alias => {
-        addRouteRecord(pathMap, nameMap, { path: alias }, parent, record.path)
+        const aliasRoute = {
+          path: alias,
+          children: route.children
+        }
+        addRouteRecord(pathMap, nameMap, aliasRoute, parent, record.path)
       })
     } else {
-      addRouteRecord(pathMap, nameMap, { path: route.alias }, parent, record.path)
+      const aliasRoute = {
+        path: route.alias,
+        children: route.children
+      }
+      addRouteRecord(pathMap, nameMap, aliasRoute, parent, record.path)
     }
   }
 
   if (!pathMap[record.path]) {
     pathMap[record.path] = record
   }
+
   if (name) {
     if (!nameMap[name]) {
       nameMap[name] = record

test/e2e/specs/route-alias.js

@@ -3,13 +3,14 @@ module.exports = {
     browser
     .url('http://localhost:8080/route-alias/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 5)
+      .assert.count('li a', 6)
       // assert correct href with base
       .assert.attributeContains('li:nth-child(1) a', 'href', '/route-alias/foo')
       .assert.attributeContains('li:nth-child(2) a', 'href', '/route-alias/home/bar-alias')
       .assert.attributeContains('li:nth-child(3) a', 'href', '/route-alias/baz')
       .assert.attributeContains('li:nth-child(4) a', 'href', '/route-alias/home/baz-alias')
       .assert.attributeEquals('li:nth-child(5) a', 'href', 'http://localhost:8080/route-alias/home')
+      .assert.attributeContains('li:nth-child(6) a', 'href', '/route-alias/home/nested-alias/foo')
 
       .click('li:nth-child(1) a')
       .assert.urlEquals('http://localhost:8080/route-alias/foo')
@@ -30,11 +31,17 @@ module.exports = {
       .assert.urlEquals('http://localhost:8080/route-alias/home/baz-alias')
       .assert.containsText('.view', 'Home')
       .assert.containsText('.view', 'baz')
+
       .click('li:nth-child(5) a')
       .assert.urlEquals('http://localhost:8080/route-alias/home')
       .assert.containsText('.view', 'Home')
       .assert.containsText('.view', 'default')
 
+      .click('li:nth-child(6) a')
+      .assert.urlEquals('http://localhost:8080/route-alias/home/nested-alias/foo')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'nested foo')
+
     // check initial visit
     .url('http://localhost:8080/route-alias/foo')
       .waitForElementVisible('#app', 1000)
@@ -65,6 +72,12 @@ module.exports = {
       .assert.urlEquals('http://localhost:8080/route-alias/home')
       .assert.containsText('.view', 'Home')
       .assert.containsText('.view', 'default')
+
+    .url('http://localhost:8080/route-alias/home/nested-alias/foo')
+      .waitForElementVisible('#app', 1000)
+      .assert.urlEquals('http://localhost:8080/route-alias/home/nested-alias/foo')
+      .assert.containsText('.view', 'Home')
+      .assert.containsText('.view', 'nested foo')
       .end()
   }
 }