v-link: changes to active class matching. add exactMatch and activeClass options

Author: yyx990803

src/directives/link.js

@@ -57,13 +57,16 @@ export default function (Vue) {
 
     update (path) {
       let router = this.vm.$route.router
-      this.replace = typeof path === 'object' ? path.replace : false
+      if (typeof path === 'object') {
+        this.replace = path.replace
+        this.exact = path.exactMatch
+        this.prevActiveClass = this.activeClass
+        this.activeClass = path.activeClass
+      }
       path = router._normalizePath(path)
       this.destination = path
-      this.activeRE = path
-        ? path === '/'
-          ? /^\/$/
-          : new RegExp('^' + path.replace(regexEscapeRE, '\\$&') + '(\\b|$)')
+      this.activeRE = path && !this.exact
+        ? new RegExp('^' + path.replace(regexEscapeRE, '\\$&') + '(\\b|$)')
         : null
       this.updateClasses(this.vm.$route.path)
       let isAbsolute = path.charAt(0) === '/'
@@ -84,18 +87,25 @@ export default function (Vue) {
       let el = this.el
       let dest = this.destination
       let router = this.vm.$route.router
-      let activeClass = router._linkActiveClass
-      let exactClass = router._linkActiveExactClass
-      if (this.activeRE &&
-          this.activeRE.test(path)) {
-        _.addClass(el, activeClass)
-      } else {
-        _.removeClass(el, activeClass)
+      let activeClass = this.activeClass || router._linkActiveClass
+      // clear old class
+      if (this.prevActiveClass !== activeClass) {
+        _.removeClass(el, this.prevActiveClass)
       }
-      if (path === dest) {
-        _.addClass(el, exactClass)
+      // add new class
+      if (this.exact) {
+        if (path === dest) {
+          _.addClass(el, activeClass)
+        } else {
+          _.removeClass(el, activeClass)
+        }
       } else {
-        _.removeClass(el, exactClass)
+        if (this.activeRE &&
+            this.activeRE.test(path)) {
+          _.addClass(el, activeClass)
+        } else {
+          _.removeClass(el, activeClass)
+        }
       }
     },
 

src/index.js

@@ -34,8 +34,7 @@ class Router {
     transitionOnLoad = false,
     suppressTransitionError = false,
     root = null,
-    linkActiveClass = 'v-link-active',
-    linkActiveExactClass = 'v-link-active-exact'
+    linkActiveClass = 'v-link-active'
   } = {}) {
 
     /* istanbul ignore if */
@@ -83,7 +82,6 @@ class Router {
     // other options
     this._saveScrollPosition = saveScrollPosition
     this._linkActiveClass = linkActiveClass
-    this._linkActiveExactClass = linkActiveExactClass
     this._suppress = suppressTransitionError
 
     // create history object

test/e2e/test.js

@@ -15,7 +15,6 @@ module.exports = {
       .waitForElementVisible('h1', 1000)
       .assert.containsText('.view h2', 'ABOUT US')
       .assert.cssClassPresent('a[href="/about"]', 'v-link-active')
-      .assert.cssClassPresent('a[href="/about"]', 'v-link-active-exact')
       // should not be able to navigate to inbox
       .click('a[href^="/inbox"]')
       .pause(100)
@@ -26,7 +25,6 @@ module.exports = {
       // should not have changed
       .assert.containsText('.view h2', 'ABOUT US')
       .assert.cssClassPresent('a[href="/about"]', 'v-link-active')
-      .assert.cssClassPresent('a[href="/about"]', 'v-link-active-exact')
 
     // /user
     .url(base + '/user/1234/profile/what')
@@ -35,7 +33,6 @@ module.exports = {
       .assert.containsText('.view h3', 'user profile')
       .assert.containsText('.view p', '1234 what')
       .assert.cssClassPresent('a[href^="/user"]', 'v-link-active')
-      .assert.cssClassPresent('a[href^="/user"]', 'v-link-active-exact')
       // change params
       .execute(function () {
         router.go('/user/2345/profile/hey')
@@ -97,7 +94,6 @@ module.exports = {
       .waitForElementVisible('h1', 1000)
       .assert.containsText('.view h2', 'ABOUT US')
       .assert.cssClassPresent('a[href="/about"]', 'v-link-active')
-      .assert.cssClassPresent('a[href="/about"]', 'v-link-active-exact')
       .end()
   }
 }

test/unit/specs/core.js

@@ -216,15 +216,17 @@ describe('Core', function () {
   it('v-link active classes', function (done) {
     router = new Router({
       abstract: true,
-      linkActiveClass: 'active',
-      linkActiveExactClass: 'active-exact'
+      linkActiveClass: 'active'
     })
     var App = Vue.extend({
       replace: false,
+      data: function () {
+        return { className: 'custom' }
+      },
       template:
         '<a id="link-a" v-link="{ path: \'/a\' }">Link A</a>' +
-        '<a id="link-b" v-link="{ path: \'/b\' }">Link B</a>' +
-        '<a id="link-c" v-link="{ path: \'/\' }">Link C</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>' +
         '<router-view></router-view>'
     })
     router.start(App, el)
@@ -234,26 +236,27 @@ describe('Core', function () {
     var linkC = el.querySelector('#link-c')
     expect(linkA.className).toBe('')
     expect(linkB.className).toBe('')
-    expect(linkC.className).toBe('active active-exact')
+    expect(linkC.className).toBe('active')
     router.go('/a')
     nextTick(function () {
-      expect(linkA.className).toBe('active active-exact')
+      expect(linkA.className).toBe('active')
       expect(linkB.className).toBe('')
       expect(linkC.className).toBe('')
       router.go('/a/b/c')
       nextTick(function () {
         expect(linkA.className).toBe('active')
         expect(linkB.className).toBe('')
-        // expect(linkC.className).toBe('')
+        expect(linkC.className).toBe('')
         router.go('/b')
         nextTick(function () {
           expect(linkA.className).toBe('')
-          expect(linkB.className).toBe('active active-exact')
+          expect(linkB.className).toBe('custom')
           expect(linkC.className).toBe('')
+          router.app.className = 'changed'
           router.go('/b/c/d')
           nextTick(function () {
             expect(linkA.className).toBe('')
-            expect(linkB.className).toBe('active')
+            expect(linkB.className).toBe('changed')
             expect(linkC.className).toBe('')
             router.go('/bcd')
             nextTick(function () {