v-link & router.go(): support append: true for relative paths

yyx990803 · yyx990803 · commit db5125c9672e · 2015-10-06T21:14:05.000-04:00
diff --git a/src/directives/link.js b/src/directives/link.js
@@ -28,11 +28,12 @@ export default function (Vue) {
         // don't redirect on right click
         if (e.button !== 0) return
 
+        let target = this.target
         if (this.el.tagName === 'A' || e.target === this.el) {
           // v-link on <a v-link="'path'">
           e.preventDefault()
-          if (this.destination != null) {
-            router.go(this.destination, this.replace === true)
+          if (target != null) {
+            router.go(target)
           }
         } else {
           // v-link delegate on <div v-link>
@@ -43,7 +44,11 @@ export default function (Vue) {
           if (!el || el.tagName !== 'A' || !el.href) return
           if (sameOrigin(el)) {
             e.preventDefault()
-            router.go(el.pathname)
+            router.go({
+              path: el.pathname,
+              replace: target && target.replace,
+              append: target && target.append
+            })
           }
         }
       }
@@ -57,22 +62,23 @@ export default function (Vue) {
 
     update (path) {
       let router = this.vm.$route.router
-      if (typeof path === 'object') {
-        this.replace = path.replace
-        this.exact = path.exactMatch
+      let append
+      this.target = path
+      if (_.isObject(path)) {
+        append = path.append
+        this.exact = path.exact
         this.prevActiveClass = this.activeClass
         this.activeClass = path.activeClass
       }
-      path = router._normalizePath(path)
-      this.destination = path
+      path = this.path = router._stringifyPath(path)
       this.activeRE = path && !this.exact
         ? new RegExp('^' + path.replace(regexEscapeRE, '\\$&') + '(\\b|$)')
         : null
       this.updateClasses(this.vm.$route.path)
       let isAbsolute = path.charAt(0) === '/'
       // do not format non-hash relative paths
       let href = router.mode === 'hash' || isAbsolute
-        ? router.history.formatPath(path)
+        ? router.history.formatPath(path, append)
         : path
       if (this.el.tagName === 'A') {
         if (href) {
@@ -85,7 +91,7 @@ export default function (Vue) {
 
     updateClasses (path) {
       let el = this.el
-      let dest = this.destination
+      let dest = this.path
       let router = this.vm.$route.router
       let activeClass = this.activeClass || router._linkActiveClass
       // clear old class
diff --git a/src/history/abstract.js b/src/history/abstract.js
@@ -15,14 +15,14 @@ export default class AbstractHistory {
     // noop
   }
 
-  go (path) {
-    path = this.currentPath = this.formatPath(path)
+  go (path, replace, append) {
+    path = this.currentPath = this.formatPath(path, append)
     this.onChange(path)
   }
 
-  formatPath (path) {
+  formatPath (path, append) {
     return path.charAt(0) === '/'
       ? path
-      : resolvePath(this.currentPath, path)
+      : resolvePath(this.currentPath, path, append)
   }
 }
diff --git a/src/history/hash.js b/src/history/hash.js
@@ -34,23 +34,24 @@ export default class HashHistory {
     window.removeEventListener('hashchange', this.listener)
   }
 
-  go (path, replace) {
-    path = this.formatPath(path)
+  go (path, replace, append) {
+    path = this.formatPath(path, append)
     if (replace) {
       location.replace(path)
     } else {
       location.hash = path
     }
   }
 
-  formatPath (path) {
+  formatPath (path, append) {
     let isAbsoloute = path.charAt(0) === '/'
     let prefix = '#' + (this.hashbang ? '!' : '')
     return isAbsoloute
       ? prefix + path
       : prefix + resolvePath(
           location.hash.replace(/^#!?/, ''),
-          path
+          path,
+          append
         )
   }
 }
diff --git a/src/history/html5.js b/src/history/html5.js
@@ -37,9 +37,8 @@ export default class HTML5History {
     window.removeEventListener('popstate', this.listener)
   }
 
-  go (path, replace) {
-    let root = this.root
-    let url = this.formatPath(path, root)
+  go (path, replace, append) {
+    let url = this.formatPath(path, append)
     if (replace) {
       history.replaceState({}, '', url)
     } else {
@@ -63,12 +62,12 @@ export default class HTML5History {
     this.onChange(path, null, hash)
   }
 
-  formatPath (path) {
+  formatPath (path, append) {
     return path.charAt(0) === '/'
       // absolute path
       ? this.root
         ? this.root + '/' + path.replace(/^\//, '')
         : path
-      : resolvePath(this.base || location.pathname, path)
+      : resolvePath(this.base || location.pathname, path, append)
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -192,9 +192,15 @@ class Router {
    * @param {Boolean} [replace]
    */
 
-  go (path, replace) {
-    path = this._normalizePath(path)
-    this.history.go(path, replace)
+  go (path) {
+    let replace = false
+    let append = false
+    if (Vue.util.isObject(path)) {
+      replace = path.replace
+      append = path.append
+    }
+    path = this._stringifyPath(path)
+    this.history.go(path, replace, append)
   }
 
   /**
@@ -204,7 +210,7 @@ class Router {
    */
 
   replace (path) {
-    this.go(path, true)
+    this.go({ path, replace: true })
   }
 
   /**
@@ -494,7 +500,7 @@ class Router {
    * @return {String}
    */
 
-  _normalizePath (path) {
+  _stringifyPath (path) {
     if (typeof path === 'object') {
       if (path.name) {
         var params = path.params || {}
diff --git a/src/util.js b/src/util.js
@@ -27,10 +27,11 @@ export function warn (msg, err) {
  *
  * @param {String} base
  * @param {String} relative
+ * @param {Boolean} append
  * @return {String}
  */
 
-export function resolvePath (base, relative) {
+export function resolvePath (base, relative, append) {
   let query = base.match(/(\?.*)$/)
   if (query) {
     query = query[1]
@@ -41,8 +42,10 @@ export function resolvePath (base, relative) {
     return base + relative
   }
   let stack = base.split('/')
-  // remove trailing segment
-  stack.pop()
+  // remove trailing segment if not appending
+  if (!append) {
+    stack.pop()
+  }
   // resolve relative path
   let segments = relative.split('/')
   for (let i = 0; i < segments.length; i++) {
diff --git a/test/unit/specs/core.js b/test/unit/specs/core.js
@@ -49,7 +49,12 @@ describe('Core', function () {
       },
       '/b/:msg': {
         name: 'b',
-        component: { template: 'B{{$route.params.msg}}{{$route.query.msg}}' }
+        component: { template: 'B{{$route.params.msg}}{{$route.query.msg}}<router-view></router-view>' },
+        subRoutes: {
+          '/c': {
+            component: { template: 'C' }
+          }
+        }
       }
     })
     var App = Vue.extend({
@@ -62,6 +67,8 @@ describe('Core', function () {
       // relative
       [{ path: '../a/A' }, 'AA'],
       [{ path: '../b/B' }, 'BB'],
+      // relative with append: true
+      [{ path: 'c', append: true }, 'BBC'],
       // named routes
       [{ name: 'a', params: {msg: 'A'}}, 'AA'],
       [{ name: 'b', params: {msg: 'B'}, query: {msg: 'B'}}, 'BBB']
@@ -184,6 +191,15 @@ describe('Core', function () {
               '<a id="link-c" v-link="{ path: c }"></c>' +
             '</div>'
         }
+      },
+      // test v-link with relative path + append
+      '/c': {
+        component: { template: '<a id="link-c" v-link="{ path: \'d\', append: true }">Link C</a><router-view></router-view>' },
+        subRoutes: {
+          '/d': {
+            component: { template: '+D' }
+          }
+        }
       }
     })
     var App = Vue.extend({
@@ -207,7 +223,16 @@ describe('Core', function () {
         click(link)
         nextTick(function () {
           expect(el.textContent).toBe('Link A')
-          done()
+          router.go('/c')
+          nextTick(function () {
+            expect(el.textContent).toBe('Link C')
+            var link = el.querySelector('#link-c')
+            click(link)
+            nextTick(function () {
+              expect(el.textContent).toBe('Link C+D')
+              done()
+            })
+          })
         })
       })
     })
@@ -226,7 +251,7 @@ describe('Core', function () {
       template:
         '<a id="link-a" v-link="{ path: \'/a\' }">Link A</a>' +
         '<a id="link-b" v-link="{ path: \'/b\', activeClass: className }">Link B</a>' +
-        '<a id="link-c" v-link="{ path: \'/\', exactMatch: true }">Link C</a>' +
+        '<a id="link-c" v-link="{ path: \'/\', exact: true }">Link C</a>' +
         '<router-view></router-view>'
     })
     router.start(App, el)

Original file line number	Diff line number	Diff line change
`@@ -15,14 +15,14 @@ export default class AbstractHistory {`
`15`	`15`	`// noop`
`16`	`16`	`}`
`17`	`17`
`18`		`- go (path) {`
`19`		`- path = this.currentPath = this.formatPath(path)`
	`18`	`+ go (path, replace, append) {`
	`19`	`+ path = this.currentPath = this.formatPath(path, append)`
`20`	`20`	`this.onChange(path)`
`21`	`21`	`}`
`22`	`22`
`23`		`- formatPath (path) {`
	`23`	`+ formatPath (path, append) {`
`24`	`24`	`return path.charAt(0) === '/'`
`25`	`25`	`? path`
`26`		`- : resolvePath(this.currentPath, path)`
	`26`	`+ : resolvePath(this.currentPath, path, append)`
`27`	`27`	`}`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -34,23 +34,24 @@ export default class HashHistory {`
`34`	`34`	`window.removeEventListener('hashchange', this.listener)`
`35`	`35`	`}`
`36`	`36`
`37`		`- go (path, replace) {`
`38`		`- path = this.formatPath(path)`
	`37`	`+ go (path, replace, append) {`
	`38`	`+ path = this.formatPath(path, append)`
`39`	`39`	`if (replace) {`
`40`	`40`	`location.replace(path)`
`41`	`41`	`} else {`
`42`	`42`	`location.hash = path`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`
`46`		`- formatPath (path) {`
	`46`	`+ formatPath (path, append) {`
`47`	`47`	`let isAbsoloute = path.charAt(0) === '/'`
`48`	`48`	`let prefix = '#' + (this.hashbang ? '!' : '')`
`49`	`49`	`return isAbsoloute`
`50`	`50`	`? prefix + path`
`51`	`51`	`: prefix + resolvePath(`
`52`	`52`	`location.hash.replace(/^#!?/, ''),`
`53`		`- path`
	`53`	`+ path,`
	`54`	`+ append`
`54`	`55`	`)`
`55`	`56`	`}`
`56`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,9 +37,8 @@ export default class HTML5History {`
`37`	`37`	`window.removeEventListener('popstate', this.listener)`
`38`	`38`	`}`
`39`	`39`
`40`		`- go (path, replace) {`
`41`		`- let root = this.root`
`42`		`- let url = this.formatPath(path, root)`
	`40`	`+ go (path, replace, append) {`
	`41`	`+ let url = this.formatPath(path, append)`
`43`	`42`	`if (replace) {`
`44`	`43`	`history.replaceState({}, '', url)`
`45`	`44`	`} else {`
`@@ -63,12 +62,12 @@ export default class HTML5History {`
`63`	`62`	`this.onChange(path, null, hash)`
`64`	`63`	`}`
`65`	`64`
`66`		`- formatPath (path) {`
	`65`	`+ formatPath (path, append) {`
`67`	`66`	`return path.charAt(0) === '/'`
`68`	`67`	`// absolute path`
`69`	`68`	`? this.root`
`70`	`69`	`? this.root + '/' + path.replace(/^\//, '')`
`71`	`70`	`: path`
`72`		`- : resolvePath(this.base \|\| location.pathname, path)`
	`71`	`+ : resolvePath(this.base \|\| location.pathname, path, append)`
`73`	`72`	`}`
`74`	`73`	`}`