feature: allow pushing relative params (close #738)

Author: yyx990803

examples/nested-routes/app.js

@@ -90,6 +90,7 @@ new Vue({
         <li><router-link to="/parent/quy/123">/parent/quy</router-link></li>
         <li><router-link :to="{name: 'zap'}">/parent/zap</router-link></li>
         <li><router-link :to="{name: 'zap', params: {zapId: 1}}">/parent/zap/1</router-link></li>
+        <li><router-link :to="{ params: { zapId: 2 }}">{ params: { zapId: 2 }} (relative params)</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/create-matcher.js

@@ -1,26 +1,11 @@
 /* @flow */
 
-import Regexp from 'path-to-regexp'
 import { assert, warn } from './util/warn'
 import { createRoute } from './util/route'
 import { createRouteMap } from './create-route-map'
 import { resolvePath } from './util/path'
 import { normalizeLocation } from './util/location'
-
-const regexpCache: {
-  [key: string]: {
-    keys: Array<?{ name: string }>,
-    regexp: RegExp
-  }
-} = Object.create(null)
-
-const regexpParamsCache: {
-  [key: string]: Array<string>
-} = Object.create(null)
-
-const regexpCompileCache: {
-  [key: string]: Function
-} = Object.create(null)
+import { getRouteRegex, fillParams } from './util/params'
 
 export function createMatcher (routes: Array<RouteConfig>): Matcher {
   const { pathMap, nameMap } = createRouteMap(routes)
@@ -35,10 +20,9 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
 
     if (name) {
       const record = nameMap[name]
-      const paramNames = regexpParamsCache[record.path] ||
-        (regexpParamsCache[record.path] = getRouteRegex(record.path).keys
-          .filter(key => !key.optional)
-          .map(key => key.name))
+      const paramNames = getRouteRegex(record.path).keys
+        .filter(key => !key.optional)
+        .map(key => key.name)
 
       if (typeof location.params !== 'object') {
         location.params = {}
@@ -158,22 +142,6 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
   return match
 }
 
-function getRouteRegex (path: string): Object {
-  const hit = regexpCache[path]
-  let keys, regexp
-
-  if (hit) {
-    keys = hit.keys
-    regexp = hit.regexp
-  } else {
-    keys = []
-    regexp = Regexp(path, keys)
-    regexpCache[path] = { keys, regexp }
-  }
-
-  return { keys, regexp }
-}
-
 function matchRoute (
   path: string,
   params: Object,
@@ -197,22 +165,6 @@ function matchRoute (
   return true
 }
 
-function fillParams (
-  path: string,
-  params: ?Object,
-  routeMsg: string
-): string {
-  try {
-    const filler =
-      regexpCompileCache[path] ||
-      (regexpCompileCache[path] = Regexp.compile(path))
-    return filler(params || {}, { pretty: true })
-  } catch (e) {
-    assert(false, `missing param for ${routeMsg}: ${e.message}`)
-    return ''
-  }
-}
-
 function resolveRecordPath (path: string, record: RouteRecord): string {
   return resolvePath(path, record.parent ? record.parent.path : '/', true)
 }

src/util/location.js

@@ -2,17 +2,37 @@
 
 import { parsePath, resolvePath } from './path'
 import { resolveQuery } from './query'
+import { fillParams } from './params'
+import { assert } from './warn'
 
 export function normalizeLocation (
   raw: RawLocation,
   current?: Route,
   append?: boolean
 ): Location {
-  const next: Location = typeof raw === 'string' ? { path: raw } : raw
+  let next: Location = typeof raw === 'string' ? { path: raw } : raw
+  // named target
   if (next.name || next._normalized) {
     return next
   }
 
+  // relative params
+  if (!next.path && next.params && current) {
+    next = assign({}, next)
+    next._normalized = true
+    const params: any = assign(assign({}, current.params), next.params)
+    if (current.name) {
+      next.name = current.name
+      next.params = params
+    } else if (current.matched) {
+      const rawPath = current.matched[current.matched.length - 1].path
+      next.path = fillParams(rawPath, params, `path ${current.path}`)
+    } else {
+      assert(false, `relative params navigation requires a current route.`)
+    }
+    return next
+  }
+
   const parsedPath = parsePath(next.path || '')
   const basePath = (current && current.path) || '/'
   const path = parsedPath.path
@@ -31,3 +51,10 @@ export function normalizeLocation (
     hash
   }
 }
+
+function assign (a, b) {
+  for (const key in b) {
+    a[key] = b[key]
+  }
+  return a
+}

src/util/params.js

@@ -0,0 +1,47 @@
+/* @flow */
+
+import Regexp from 'path-to-regexp'
+import { assert } from './warn'
+
+const regexpCache: {
+  [key: string]: {
+    keys: Array<?{ name: string }>,
+    regexp: RegExp
+  }
+} = Object.create(null)
+
+export function getRouteRegex (path: string): Object {
+  const hit = regexpCache[path]
+  let keys, regexp
+
+  if (hit) {
+    keys = hit.keys
+    regexp = hit.regexp
+  } else {
+    keys = []
+    regexp = Regexp(path, keys)
+    regexpCache[path] = { keys, regexp }
+  }
+
+  return { keys, regexp }
+}
+
+const regexpCompileCache: {
+  [key: string]: Function
+} = Object.create(null)
+
+export function fillParams (
+  path: string,
+  params: ?Object,
+  routeMsg: string
+): string {
+  try {
+    const filler =
+      regexpCompileCache[path] ||
+      (regexpCompileCache[path] = Regexp.compile(path))
+    return filler(params || {}, { pretty: true })
+  } catch (e) {
+    assert(false, `missing param for ${routeMsg}: ${e.message}`)
+    return ''
+  }
+}

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', 8)
+      .assert.count('li a', 9)
       .assert.urlEquals('http://localhost:8080/nested-routes/parent')
       .assert.containsText('.view', 'Parent')
       .assert.containsText('.view', 'default')
@@ -43,7 +43,7 @@ module.exports = {
         return (
           JSON.stringify(params) === JSON.stringify(['quyId'])
         )
-      }, null, '/')
+      }, null, 'quyId')
 
       .click('li:nth-child(8) a')
       .assert.urlEquals('http://localhost:8080/nested-routes/parent/zap/1')
@@ -52,7 +52,7 @@ module.exports = {
       .assert.evaluate(function () {
         var zapId = document.querySelector('pre').textContent
         return (zapId === '1')
-      }, null, '/')
+      }, null, 'zapId')
 
       .click('li:nth-child(7) a')
       .assert.urlEquals('http://localhost:8080/nested-routes/parent/zap')
@@ -61,7 +61,14 @@ module.exports = {
       .assert.evaluate(function () {
         var zapId = document.querySelector('pre').textContent
         return (zapId === '')
-      }, null, '/')
+      }, null, 'optional zapId')
+
+      // test relative params
+      .click('li:nth-child(9) a')
+      .assert.evaluate(function () {
+        var zapId = document.querySelector('pre').textContent
+        return (zapId === '2')
+      }, null, 'relative params')
 
     // check initial visit
     .url('http://localhost:8080/nested-routes/parent/foo')

test/unit/specs/location.spec.js

@@ -68,6 +68,26 @@ describe('Location utils', () => {
       }))
     })
 
+    it('relative params (named)', () => {
+      const loc = normalizeLocation({ params: { lang: 'fr' }}, {
+        name: 'hello',
+        params: { lang: 'en', id: 'foo' }
+      })
+      expect(loc._normalized).toBe(true)
+      expect(loc.name).toBe('hello')
+      expect(loc.params).toEqual({ lang: 'fr', id: 'foo' })
+    })
+
+    it('relative params (non-named)', () => {
+      const loc = normalizeLocation({ params: { lang: 'fr' }}, {
+        path: '/en/foo',
+        params: { lang: 'en', id: 'foo' },
+        matched: [{ path: '/:lang/:id' }]
+      })
+      expect(loc._normalized).toBe(true)
+      expect(loc.path).toBe('/fr/foo')
+    })
+
     it('object', () => {
       const loc = normalizeLocation({
         path: '/abc?foo=bar#hello',