v-link-active + tests

Author: yyx990803

src/directives/link.js

@@ -15,6 +15,12 @@ export default function (Vue) {
     removeClass
   } = Vue.util
 
+  Vue.directive('link-active', {
+    bind () {
+      this.el.__v_link_active = true
+    }
+  })
+
   Vue.directive('link', {
 
     bind () {
@@ -36,6 +42,16 @@ export default function (Vue) {
       }
       // handle click
       this.el.addEventListener('click', bind(this.onClick, this))
+      // check if active classes should be applied to a different element
+      this.activeEl = this.el
+      var parent = this.el.parentNode
+      while (parent) {
+        if (parent.__v_link_active) {
+          this.activeEl = parent
+          break
+        }
+        parent = parent.parentNode
+      }
     },
 
     update (target) {
@@ -111,7 +127,10 @@ export default function (Vue) {
       this.activeRE = this.path && !this.exact
         ? new RegExp(
             '^' +
-            this.path.replace(/\/$/, '').replace(regexEscapeRE, '\\$&') +
+            this.path
+              .replace(/\/$/, '')
+              .replace(queryStringRE, '')
+              .replace(regexEscapeRE, '\\$&') +
             '(\\/|$)'
           )
         : null
@@ -140,7 +159,7 @@ export default function (Vue) {
     },
 
     updateClasses (path) {
-      const el = this.el
+      const el = this.activeEl
       const activeClass = this.activeClass || this.router._linkActiveClass
       // clear old class
       if (this.prevActiveClass !== activeClass) {

src/index.js

@@ -546,9 +546,10 @@ class Router {
       if (path.name) {
         const extend = Vue.util.extend
         const currentParams = this._currentTransition.to.params
+        const targetParams = path.params || {}
         const params = currentParams
-          ? extend(extend({}, currentParams), path.params)
-          : path.params || {}
+          ? extend(extend({}, currentParams), targetParams)
+          : targetParams
         if (path.query) {
           params.queryParams = path.query
         }

test/unit/specs/core.js

@@ -381,6 +381,83 @@ describe('Core', function () {
     })
   })
 
+it('v-link active classes with named routes', function (done) {
+    router = new Router({
+      abstract: true,
+      linkActiveClass: 'active'
+    })
+    router.map({
+      '/a/:id': {
+        component: {},
+        subRoutes: {
+          'b/:bid': {
+            name: 'b',
+            component: {}
+          }
+        }
+      }
+    })
+    var App = Vue.extend({
+      replace: false,
+      data: function () {
+        return { className: 'custom' }
+      },
+      template:
+        '<a id="link" v-link="{ name: \'b\', params: { id: 1, bid: 2 }}">Link A</a>' +
+        '<router-view></router-view>'
+    })
+    router.start(App, el)
+    el = router.app.$el
+    var link = el.querySelector('#link')
+    expect(link.className).toBe('')
+    router.go('/a/1/b/1')
+    nextTick(function () {
+      expect(link.className).toBe('')
+      router.go({ name: 'b', params: { bid: 2 }})
+      nextTick(function () {
+        expect(link.className).toBe('active')
+        expect(router._currentRoute.path).toBe('/a/1/b/2')
+        done()
+      })
+    })
+  })
+
+  it('v-link active classes with v-link-active', function (done) {
+    router = new Router({
+      abstract: true,
+      linkActiveClass: 'active'
+    })
+    var App = Vue.extend({
+      replace: false,
+      template:
+        '<ul>' +
+          '<li id="link-a" v-link-active>' +
+            '<a v-link="{ path: \'/a\' }">Link A</a>' +
+          '</li>' +
+          '<li id="link-b" v-link-active>' +
+            '<a v-link="{ path: \'/b\' }">Link B</a>' +
+          '</li>' +
+        '</ul>'
+    })
+    router.start(App, el)
+    el = router.app.$el
+    var linkA = el.querySelector('#link-a')
+    var linkB = el.querySelector('#link-b')
+    expect(linkA.className).toBe('')
+    expect(linkB.className).toBe('')
+    router.go('/a')
+    nextTick(function () {
+      expect(linkA.className).toBe('active')
+      expect(linkB.className).toBe('')
+      router.go('/b')
+      nextTick(function () {
+        expect(linkA.className).toBe('')
+        expect(linkB.className).toBe('active')
+        done()
+      })
+    })
+  })
+
   it('v-link relative querystring', function (done) {
     router = new Router({ abstract: true })
     router.map({