add active link class

vuejs · Jul 17, 2015 · 0e11456 · 0e11456
1 parent 2dacb0b
commit 0e11456
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/example/index.html b/example/index.html
@@ -11,6 +11,9 @@
         opacity: 0;
         transform: translate3d(10px, 0, 0);
       }
+      .v-link-active {
+        color: red;
+      }
       [v-cloak] {
         display: none;
       }

diff --git a/src/index.js b/src/index.js
@@ -45,6 +45,7 @@ function Router (options) {
   this._hashbang = options.hashbang !== false
   this._history = !!(this._hasPushState && options.history)
   this._saveScrollPosition = !!options.saveScrollPosition
+  this._linkActiveClass = options.linkActiveClass || 'v-link-active'
 
   // resolve root path
   var root = options && options.root

diff --git a/src/link.js b/src/link.js
@@ -31,10 +31,20 @@ module.exports = function (Vue) {
       if (!this._isDynamicLiteral) {
         this.update(this.expression)
       }
+      // manage active link class
+      var activeClass = vm.route._router._linkActiveClass
+      this.unwatch = vm.$watch('route.path', function (path) {
+        if (path === self.destination) {
+          _.addClass(self.el, activeClass)
+        } else {
+          _.removeClass(self.el, activeClass)
+        }
+      })
     },
 
     unbind: function () {
       this.el.removeEventListener('click', this.handler)
+      this.unwatch && this.unwatch()
     },
 
     update: function (path) {