support router-link on outer element

Author: yyx990803

examples/active-links/app.js

@@ -57,6 +57,10 @@ new Vue({
         </li>
 
         <li><router-link to="/about">/about</router-link></li>
+
+        <router-link tag="li" to="/about">
+          <a>/about (active class on outer element)</a>
+        </router-link>
       </ul>
       <router-view class="view"></router-view>
     </div>

examples/active-links/index.html

@@ -4,6 +4,9 @@
 a.router-link-active {
   color: #f66;
 }
+li.router-link-active a {
+  color: #f66;
+}
 </style>
 <a href="/">&larr; Examples index</a>
 <div id="app"></div>

src/components/link.js

@@ -9,7 +9,10 @@ export default {
       type: [String, Object],
       required: true
     },
-    tag: String,
+    tag: {
+      type: String,
+      default: 'a'
+    },
     exact: Boolean,
     append: Boolean,
     replace: Boolean,
@@ -29,8 +32,7 @@ export default {
       ? isSameRoute(current, resolved)
       : isIncludedRoute(current, resolved)
 
-    return h(this.tag || 'a', {
-      attrs: { href },
+    const data = {
       class: classes,
       on: {
         click: (e) => {
@@ -42,6 +44,35 @@ export default {
           }
         }
       }
-    }, this.$slots.default)
+    }
+
+    if (this.tag === 'a') {
+      data.attrs = { href }
+    } else {
+      // find the first <a> child and apply href
+      const a = findAnchor(this.$slots.default)
+      if (a) {
+        const aData = a.data || (a.data = {})
+        const aAttrs = aData.attrs || (aData.attrs = {})
+        aAttrs.href = href
+      }
+    }
+
+    return h(this.tag, data, this.$slots.default)
+  }
+}
+
+function findAnchor (children) {
+  if (children) {
+    let child
+    for (let i = 0; i < children.length; i++) {
+      child = children[i]
+      if (child.tag === 'a') {
+        return child
+      }
+      if (child.children && (child = findAnchor(child.children))) {
+        return child
+      }
+    }
   }
 }

test/e2e/runner.js

@@ -1,8 +1,11 @@
 var path = require('path')
 var spawn = require('cross-spawn')
-var server = process.env.DEV ? null : require('../../examples/server')
-
 var args = process.argv.slice(2)
+
+var server = args.indexOf('--dev') > -1
+  ? null
+  : require('../../examples/server')
+
 if (args.indexOf('--config') === -1) {
   args = args.concat(['--config', 'test/e2e/nightwatch.config.js'])
 }

test/e2e/specs/active-links.js

@@ -3,7 +3,7 @@ module.exports = {
     browser
     .url('http://localhost:8080/active-links/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 9)
+      .assert.count('li a', 10)
       // assert correct href with base
       .assert.attributeContains('li:nth-child(1) a', 'href', '/active-links/')
       .assert.attributeContains('li:nth-child(2) a', 'href', '/active-links/')
@@ -14,6 +14,7 @@ module.exports = {
       .assert.attributeContains('li:nth-child(7) a', 'href', '/active-links/users/evan?foo=bar')
       .assert.attributeContains('li:nth-child(8) a', 'href', '/active-links/users/evan?baz=qux&foo=bar')
       .assert.attributeContains('li:nth-child(9) a', 'href', '/active-links/about')
+      .assert.attributeContains('li:nth-child(10) a', 'href', '/active-links/about')
       .assert.containsText('.view', 'Home')
 
     assertActiveLinks(1, [1, 2])
@@ -24,15 +25,19 @@ module.exports = {
     assertActiveLinks(6, [1, 3, 5, 6])
     assertActiveLinks(7, [1, 3, 5, 7])
     assertActiveLinks(8, [1, 3, 5, 7, 8])
-    assertActiveLinks(9, [1, 9])
+    assertActiveLinks(9, [1, 9], [10])
+    assertActiveLinks(10, [1, 9], [10])
 
     browser.end()
 
-    function assertActiveLinks (n, activeOnes) {
+    function assertActiveLinks (n, activeA, activeLI) {
       browser.click(`li:nth-child(${n}) a`)
-      activeOnes.forEach(i => {
+      activeA.forEach(i => {
         browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'router-link-active')
       })
+      activeLI && activeLI.forEach(i => {
+        browser.assert.cssClassPresent(`li:nth-child(${i})`, 'router-link-active')
+      })
     }
   }
 }