use new v-link syntax

Author: yyx990803

example/advanced/app.vue

@@ -18,10 +18,10 @@
   <div>
     <p v-show="authenticating" style="color:red">Authenticating...</p>
     <h1>App Header</h1>
-    <a v-link="/inbox/message/123">inbox</a>
-    <a v-link="/about">about</a>
-    <a v-link="/user/1234/profile/what">user</a>
-    <a v-link="/forbidden">forbidden</a>
+    <a v-link="{ path: '/inbox/message/123' }">inbox</a>
+    <a v-link="{ path: '/about' }">about</a>
+    <a v-link="{ path: '/user/1234/profile/what' }">user</a>
+    <a v-link="{ path: '/forbidden' }">forbidden</a>
     <router-view class="view" v-transition="test" transition-mode="out-in"></router-view>
   </div>
 </template>

src/directives/link.js

@@ -9,9 +9,7 @@ export default function (Vue) {
 
   Vue.directive('link', {
 
-    isLiteral: true,
-
-    bind: function () {
+    bind () {
       let vm = this.vm
       /* istanbul ignore if */
       if (!vm.$route) {
@@ -31,44 +29,21 @@ export default function (Vue) {
         }
       }
       this.el.addEventListener('click', this.handler)
-      if (!this._isDynamicLiteral) {
-        this.update(this.expression)
-      }
       // manage active link class
       this.unwatch = vm.$watch(
         '$route.path',
         _.bind(this.updateClasses, this)
       )
     },
 
-    updateClasses: function (path) {
-      let el = this.el
-      let dest = this.destination
+    update (path) {
       let router = this.vm.$route.router
-      let activeClass = router._linkActiveClass
-      let exactClass = activeClass + '-exact'
-      if (this.activeRE &&
-          this.activeRE.test(path) &&
-          path !== '/') {
-        _.addClass(el, activeClass)
-      } else {
-        _.removeClass(el, activeClass)
-      }
-      if (path === dest) {
-        _.addClass(el, exactClass)
-      } else {
-        _.removeClass(el, exactClass)
-      }
-    },
-
-    update: function (path) {
+      path = router._normalizePath(path)
       this.destination = path
       this.activeRE = path
         ? new RegExp('^' + path.replace(regexEscapeRE, '\\$&') + '\\b')
         : null
       this.updateClasses(this.vm.$route.path)
-      path = path || ''
-      let router = this.vm.$route.router
       let isAbsolute = path.charAt(0) === '/'
       // do not format non-hash relative paths
       let href = router.mode === 'hash' || isAbsolute
@@ -83,7 +58,27 @@ export default function (Vue) {
       }
     },
 
-    unbind: function () {
+    updateClasses (path) {
+      let el = this.el
+      let dest = this.destination
+      let router = this.vm.$route.router
+      let activeClass = router._linkActiveClass
+      let exactClass = activeClass + '-exact'
+      if (this.activeRE &&
+          this.activeRE.test(path) &&
+          path !== '/') {
+        _.addClass(el, activeClass)
+      } else {
+        _.removeClass(el, activeClass)
+      }
+      if (path === dest) {
+        _.addClass(el, exactClass)
+      } else {
+        _.removeClass(el, exactClass)
+      }
+    },
+
+    unbind () {
       this.el.removeEventListener('click', this.handler)
       this.unwatch && this.unwatch()
     }

src/directives/view.js

@@ -13,7 +13,7 @@ export default function (Vue) {
 
     _isRouterView: true,
 
-    bind: function () {
+    bind () {
       let route = this.vm.$route
       /* istanbul ignore if */
       if (!route) {
@@ -74,7 +74,7 @@ export default function (Vue) {
       }
     },
 
-    unbind: function () {
+    unbind () {
       this.router._views.$remove(this)
       componentDef.unbind.call(this)
     }

src/router/api.js

@@ -90,19 +90,8 @@ export default function (Vue, Router) {
    */
 
   Router.prototype.go = function (path, replace) {
-    // handle named routes
-    if (typeof path === 'object') {
-      if (path.name) {
-        var params = path.params || {}
-        if (path.query) {
-          params.queryParams = path.query
-        }
-        path = this._recognizer.generate(path.name, params)
-      } else if (path.path) {
-        path = path.path
-      }
-    }
-    this.history.go(path + '', replace)
+    path = this._normalizePath(path)
+    this.history.go(path, replace)
   }
 
   /**

src/router/internal.js

@@ -238,6 +238,32 @@ export default function (Vue, Router) {
     }
   }
 
+  /**
+   * Normalize named route object / string paths into
+   * a string.
+   *
+   * @param {Object|String|Number} path
+   * @return {String}
+   */
+
+  Router.prototype._normalizePath = function (path) {
+    if (typeof path === 'object') {
+      if (path.name) {
+        var params = path.params || {}
+        if (path.query) {
+          params.queryParams = path.query
+        }
+        return this._recognizer.generate(path.name, params)
+      } else if (path.path) {
+        return path.path
+      } else {
+        return ''
+      }
+    } else {
+      return path + ''
+    }
+  }
+
   /**
    * Allow directly passing components to a route
    * definition.

test/unit/specs/core.js

@@ -164,7 +164,7 @@ describe('Core', function () {
         component: {
           template:
             '<div>' +
-              '<a id="link-a" v-link="b">Link A</a>' +
+              '<a id="link-a" v-link="{ path: \'b\' }">Link A</a>' +
             '</div>'
         }
       },
@@ -175,8 +175,8 @@ describe('Core', function () {
           },
           template:
             '<div>' +
-              '<a id="link-b" v-link="/{{a}}">Link B</a>' +
-              '<a id="link-c" v-link="{{c}}"></c>' +
+              '<a id="link-b" v-link="{ path: \'/\' + a }">Link B</a>' +
+              '<a id="link-c" v-link="{ path: c }"></c>' +
             '</div>'
         }
       }
@@ -216,8 +216,8 @@ describe('Core', function () {
     var App = Vue.extend({
       replace: false,
       template:
-        '<a id="link-a" v-link="/a">Link A</a>' +
-        '<a id="link-b" v-link="/b">Link B</a>' +
+        '<a id="link-a" v-link="{ path: \'/a\' }">Link A</a>' +
+        '<a id="link-b" v-link="{ path: \'/b\' }">Link B</a>' +
         '<router-view></router-view>'
     })
     router.start(App, el)
@@ -268,7 +268,7 @@ describe('Core', function () {
             component: {
               template:
                 '<div>' +
-                  '<a v-link="?id=1234" id="link"></a>' +
+                  '<a v-link="{ path: \'?id=1234\' }" id="link"></a>' +
                   '{{$route.query.id}}' +
                 '</div>'
             }