Merge pull request #851 from wjmao88/inherit-params

Allow route to use current params to fill ones it does not provide

Author: yyx990803

examples/nested-routes/app.js

@@ -19,6 +19,17 @@ const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }
 const Baz = { template: '<div>baz</div>' }
 
+const Qux = {
+  template: `
+    <div class="nested-parent">
+      <h3>qux</h3>
+      <router-link :to="{ name: 'quux' }">/quux</router-link>
+      <router-view class="nested-child"></router-view>
+    </div>
+  `
+}
+const Quux = { template: '<div>quux</div>' }
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -40,7 +51,13 @@ const router = new VueRouter({
         // this allows you to leverage the component nesting without being
         // limited to the nested URL.
         // components rendered at /baz: Root -> Parent -> Baz
-        { path: '/baz', component: Baz }
+        { path: '/baz', component: Baz },
+
+        {
+          path: 'qux/:quxId',
+          component: Qux,
+          children: [{ path: 'quux', name: 'quux', component: Quux }]
+        }
       ]
     }
   ]
@@ -56,6 +73,7 @@ new Vue({
         <li><router-link to="/parent/foo">/parent/foo</router-link></li>
         <li><router-link to="/parent/bar">/parent/bar</router-link></li>
         <li><router-link to="/baz">/baz</router-link></li>
+        <li><router-link to="/parent/qux/123">/parent/qux</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/components/link.js

@@ -28,7 +28,7 @@ export default {
     const router = this.$router
     const current = this.$route
     const to = normalizeLocation(this.to, current, this.append)
-    const resolved = router.match(to)
+    const resolved = router.match(to, current)
     const fullPath = resolved.redirectedFrom || resolved.fullPath
     const base = router.history.base
     const href = createHref(base, fullPath, router.mode)

src/create-matcher.js

@@ -31,6 +31,19 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
 
     if (name) {
       const record = nameMap[name]
+
+      if (typeof location.params !== 'object') {
+        location.params = {}
+      }
+
+      if (currentRoute && typeof currentRoute.params === 'object') {
+        for (const key in currentRoute.params) {
+          if (!(key in location.params)) {
+            location.params[key] = currentRoute.params[key]
+          }
+        }
+      }
+
       if (record) {
         location.path = fillParams(record.path, location.params, `named route "${name}"`)
         return _createRoute(record, location, redirectedFrom)

test/e2e/specs/nested-routes.js

@@ -3,7 +3,7 @@ module.exports = {
     browser
     .url('http://localhost:8080/nested-routes/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 4)
+      .assert.count('li a', 5)
       .assert.urlEquals('http://localhost:8080/nested-routes/parent')
       .assert.containsText('.view', 'Parent')
       .assert.containsText('.view', 'default')
@@ -23,6 +23,17 @@ module.exports = {
       .assert.containsText('.view', 'Parent')
       .assert.containsText('.view', 'baz')
 
+      .click('li:nth-child(5) a')
+      .assert.urlEquals('http://localhost:8080/nested-routes/parent/qux/123')
+      .assert.containsText('.view', 'Parent')
+      .assert.containsText('.view', 'qux')
+
+      .click('.nested-parent a')
+      .assert.urlEquals('http://localhost:8080/nested-routes/parent/qux/123/quux')
+      .assert.containsText('.view', 'Parent')
+      .assert.containsText('.view', 'qux')
+      .assert.containsText('.view', 'quux')
+
     // check initial visit
     .url('http://localhost:8080/nested-routes/parent/foo')
       .waitForElementVisible('#app', 1000)