Add support for 'disabled' attribute to <router-link>, fixes vuejs#916

Author: Bojan Markovic

examples/navigation-guards/app.js

@@ -87,6 +87,14 @@ const Quux = {
   }
 }
 
+const Baf = {
+  template: `
+    <div>
+      <p> baf, you should never see this</p>
+    </div>
+  `
+}
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -106,15 +114,19 @@ const router = new VueRouter({
     // Qux implements an in-component beforeRouteEnter hook
     { path: '/qux', component: Qux },
 
-   // in-component beforeRouteEnter hook for async components
+    // in-component beforeRouteEnter hook for async components
     { path: '/qux-async', component: resolve => {
       setTimeout(() => {
         resolve(Qux)
       }, 0)
     } },
 
     // in-component beforeRouteUpdate hook
-    { path: '/quux/:id', component: Quux }
+    { path: '/quux/:id', component: Quux },
+
+    // Baf implements declarative "disabled" in template
+    { path: '/baf', component: Baf }
+
   ]
 })
 
@@ -140,6 +152,7 @@ new Vue({
         <li><router-link to="/qux-async">/qux-async</router-link></li>
         <li><router-link to="/quux/1">/quux/1</router-link></li>
         <li><router-link to="/quux/2">/quux/2</router-link></li>
+        <li><router-link to="/baf" disabled>/baf</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/components/link.js

@@ -119,6 +119,11 @@ function guardEvent (e) {
   if (e.preventDefault) {
     e.preventDefault()
   }
+  // if the currentTarget is disabled, preventDefault, don't redirect
+  if (e.currentTarget && e.currentTarget.getAttribute('disabled')) {
+    e.preventDefault && e.preventDefault()
+    return
+  }
   return true
 }
 

test/e2e/specs/navigation-guards.js

@@ -8,9 +8,14 @@ module.exports = {
     browser
     .url('http://localhost:8080/navigation-guards/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 8)
+      .assert.count('li a', 9)
       .assert.containsText('.view', 'home')
 
+      .click('li:nth-child(9) a')
+      .waitFor(100)
+      .assert.urlEquals('http://localhost:8080/navigation-guards/')
+      .assert.containsText('.view', 'home')      
+
       .click('li:nth-child(2) a')
       .dismissAlert()
       .waitFor(100)