Merge branch 'link-delegate' into dev

Author: yyx990803

src/directives/link.js

@@ -26,11 +26,26 @@ export default function (Vue) {
         // don't redirect when preventDefault called
         if (e.defaultPrevented) return
 
-        if (e.button === 0) {
+        if (e.button !== 0) return
+
+        if (this.el.tagName === 'A') {
+          // v-link on <a v-link="'path'">
           e.preventDefault()
           if (this.destination != null) {
             router.go(this.destination)
           }
+        } else {
+          // v-link delegate on <div v-link>
+          var el = e.target
+          while (el && el.tagName !== 'A' && el !== this.el) {
+            el = el.parentNode
+          }
+          if (!el || el.tagName !== 'A' || !el.href) return
+
+          if (sameOrigin(el)) {
+            e.preventDefault()
+            router.go(el.href)
+          }
         }
       }
       this.el.addEventListener('click', this.handler)
@@ -88,4 +103,10 @@ export default function (Vue) {
       this.unwatch && this.unwatch()
     }
   })
+
+  function sameOrigin (link) {
+    return link.protocol === location.protocol &&
+      link.hostname === location.hostname &&
+      link.port === location.port
+  }
 }

test/unit/specs/core.js

@@ -292,6 +292,45 @@ describe('Core', function () {
     })
   })
 
+  it('v-link delegate', function (done) {
+    router = new Router({ abstract: true })
+    router.map({
+      '/': {
+        component: {
+          template: '<div>Home</div>'
+        }
+      },
+      '/foo': {
+        component: {
+          data: function () {
+            return { home: '<a href="/">Link Home</a>' }
+          },
+          template: '<div id="wrap" v-html="home" v-link></div>'
+        }
+      }
+    })
+    var App = Vue.extend({
+      replace: false,
+      template: '<router-view></router-view>'
+    })
+    router.start(App, el)
+    el = router.app.$el
+    router.go('/foo')
+    nextTick(function () {
+      var wrap = el.querySelector('#wrap')
+      var e = document.createEvent('HTMLEvents')
+      // target is read-only
+      e.target = wrap.querySelector('a')
+      e.initEvent('click', true, true)
+      wrap.dispatchEvent(e)
+      nextTick(function () {
+        var text = router.app.$el.textContent
+        expect(text).toBe('Home')
+        done()
+      })
+    })
+  })
+
   it('alias', function (done) {
     router = new Router({ abstract: true })
     router.map({