Fix for #608: fixing named routes matching for default child

examples/named-routes/app.js

@@ -6,14 +6,19 @@ Vue.use(VueRouter)
 const Home = { template: '<div>This is Home</div>' }
 const Foo = { template: '<div>This is Foo</div>' }
 const Bar = { template: '<div>This is Bar</div>' }
+const Parent = { template: '<div>This is Parent<br><router-view class="child-view">This is Parent</router-view></div>' }
+const Child = { template: '<div>This is Child</div>' }
 
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
   routes: [
     { path: '/', name: 'home', component: Home },
     { path: '/foo', name: 'foo', component: Foo },
-    { path: '/bar', name: 'bar', component: Bar }
+    { path: '/bar', name: 'bar', component: Bar },
+    { path: '/parent', name: 'parent', component: Parent,
+      children: [{ path: '', name: 'child', component: Child }]
+    }
   ]
 })
 
@@ -27,6 +32,8 @@ new Vue({
         <li><router-link :to="{ name: 'home' }">home</router-link></li>
         <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
         <li><router-link :to="{ name: 'bar' }">bar</router-link></li>
+        <li><router-link :to="{ name: 'parent' }">parent</router-link></li>
+        <li><router-link :to="{ name: 'child' }">child</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/create-matcher.js

@@ -30,7 +30,7 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
     const { name } = location
 
     if (name) {
-      const record = nameMap[name]
+      const record = findNamedRecord(nameMap, name)
       if (record) {
         location.path = fillParams(record.path, location.params, `named route "${name}"`)
         return _createRoute(record, location, redirectedFrom)
@@ -204,3 +204,11 @@ function resolveRecordPath (path: string, record: RouteRecord): string {
 function getFullPath ({ path, query = {}, hash = '' }) {
   return (path || '/') + stringifyQuery(query) + hash
 }
+
+function findNamedRecord (nameMap: RouteMap, name: string): ?RouteRecord {
+  const defaultRecord = nameMap['_' + name]
+  if (defaultRecord) {
+    return defaultRecord
+  }
+  return nameMap[name]
+}

src/create-route-map.js

@@ -60,6 +60,10 @@ function addRouteRecord (
 
   pathMap[record.path] = record
   if (name) nameMap[name] = record
+
+  if (path === '' && parent && parent.name) {
+    addDefaultRoute(nameMap, parent.name, record)
+  }
 }
 
 function normalizePath (path: string, parent?: RouteRecord): string {
@@ -68,3 +72,9 @@ function normalizePath (path: string, parent?: RouteRecord): string {
   if (parent == null) return path
   return cleanPath(`${parent.path}/${path}`)
 }
+
+function addDefaultRoute (nameMap: RouteMap, name: string, record: RouteRecord) {
+  record.path = normalizePath(record.path)
+  const defaultName = '_' + name
+  nameMap[defaultName] = record
+}

test/e2e/specs/named-routes.js

@@ -3,11 +3,13 @@ module.exports = {
     browser
     .url('http://localhost:8080/named-routes/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 3)
+      .assert.count('li a', 5)
       // assert correct href with base
       .assert.attributeContains('li:nth-child(1) a', 'href', '/named-routes/')
       .assert.attributeContains('li:nth-child(2) a', 'href', '/named-routes/foo')
       .assert.attributeContains('li:nth-child(3) a', 'href', '/named-routes/bar')
+      .assert.attributeContains('li:nth-child(4) a', 'href', '/named-routes/parent')
+      .assert.attributeContains('li:nth-child(5) a', 'href', '/named-routes/parent')
       .assert.containsText('p', 'Current route name: home')
       .assert.containsText('.view', 'Home')
 
@@ -16,6 +18,13 @@ module.exports = {
       .assert.containsText('p', 'Current route name: foo')
       .assert.containsText('.view', 'Foo')
 
+      // check parent
+      .click('li:nth-child(4) a')
+      .assert.urlEquals('http://localhost:8080/named-routes/parent')
+      .assert.containsText('p', 'Current route name: parent')
+      .assert.containsText('.view', 'Parent')
+      .assert.containsText('.child-view', 'Child')
+
       .click('li:nth-child(3) a')
       .assert.urlEquals('http://localhost:8080/named-routes/bar')
       .assert.containsText('p', 'Current route name: bar')
@@ -26,6 +35,20 @@ module.exports = {
       .assert.containsText('p', 'Current route name: home')
       .assert.containsText('.view', 'Home')
 
+      // check child
+      .click('li:nth-child(5) a')
+      .assert.urlEquals('http://localhost:8080/named-routes/parent')
+      .assert.containsText('p', 'Current route name: child')
+      .assert.containsText('.view', 'Parent')
+      .assert.containsText('.child-view', 'Child')
+
+      // check parent again but this time the route should not change
+      .click('li:nth-child(4) a')
+      .assert.urlEquals('http://localhost:8080/named-routes/parent')
+      .assert.containsText('p', 'Current route name: child')
+      .assert.containsText('.view', 'Parent')
+      .assert.containsText('.child-view', 'Child')
+
     // check initial visit
     .url('http://localhost:8080/named-routes/foo')
       .waitForElementVisible('#app', 1000)