diff --git a/examples/named-routes/app.js b/examples/named-routes/app.js index 44ae179d8..e948be1dd 100644 --- a/examples/named-routes/app.js +++ b/examples/named-routes/app.js @@ -6,6 +6,8 @@ Vue.use(VueRouter) const Home = { template: '
This is Home
' } const Foo = { template: '
This is Foo
' } const Bar = { template: '
This is Bar
' } +const Parent = { template: '
This is Parent
This is Parent
' } +const Child = { template: '
This is Child
' } const router = new VueRouter({ mode: 'history', @@ -13,7 +15,10 @@ const router = new VueRouter({ 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({
  • home
  • foo
  • bar
  • +
  • parent
  • +
  • child
  • diff --git a/src/create-matcher.js b/src/create-matcher.js index 0b2569791..0555ad145 100644 --- a/src/create-matcher.js +++ b/src/create-matcher.js @@ -30,7 +30,7 @@ export function createMatcher (routes: Array): 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] +} diff --git a/src/create-route-map.js b/src/create-route-map.js index f3e2ef37d..5aaede3e8 100644 --- a/src/create-route-map.js +++ b/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 +} diff --git a/test/e2e/specs/named-routes.js b/test/e2e/specs/named-routes.js index d16d38fca..80222afec 100644 --- a/test/e2e/specs/named-routes.js +++ b/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)