docs: named routes & v-link changes

Author: yyx990803

docs/en/SUMMARY.md

@@ -4,6 +4,7 @@
 - [Basic Usage](basic.md)
 - [Nested Routes](nested.md)
 - [Route Object & Route Matching](route.md)
+- [Named Routes](named.md)
 - [Router Options](options.md)
 - [router-view](view.md)
 - [v-link](link.md)

docs/en/basic.md

@@ -9,8 +9,8 @@ Creating a Single-page Application with Vue.js + vue-router is dead simple. With
   <h1>Hello App!</h1>
   <p>
     <!-- use v-link directive for navigation. -->
-    <a v-link="/foo">Go to Foo</a>
-    <a v-link="/bar">Go to Bar</a>
+    <a v-link="{ path: '/foo' }">Go to Foo</a>
+    <a v-link="{ path: '/bar' }">Go to Bar</a>
   </p>
   <!-- route outlet -->
   <router-view></router-view>

docs/en/link.md

@@ -1,6 +1,19 @@
 # v-link
 
-You should use the `v-link` directive for handling navigations inside a vue-router-enabled app for the following reasons:
+`v-link` is the directive for enabling user navigation in a router-enabled app. It accpets a JavaScript expression which will be passed to `router.go()` internally. For example:
+
+``` html
+<!-- literal string -->
+<a v-link="'home'">Home</a>
+
+<!-- same as above -->
+<a v-link="{ path: 'home' }">Home</a>
+
+<!-- named route -->
+<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>
+```
+
+`v-link` is preferred over hard-coded `href` for the following reasons:
 
 - It works the same way in both HTML5 history mode and hash mode, so if you ever decide to switch mode, or when the router falls back to hash mode in IE9, nothing needs to be changed.
 
@@ -21,5 +34,3 @@ The active link class name can be configured with the `activeLinkClass` option w
 #### Additional Notes
 
 - `v-link` automatically sets the `href` attribute when used on an `<a>` element.
-
-- Because `v-link` is a [literal directive](http://vuejs.org/guide/directives.html#Literal_Directives), it can contain mustache tags, e.g. `v-link="/user/{% raw %}{{user.name}}{% endraw %}"`.

docs/en/named.md

@@ -0,0 +1,26 @@
+# Named Routes
+
+Sometimes it is more convenient to identify a route with a name, especially when performing navigations. You can give a route a name in the route config like this:
+
+``` js
+router.map({
+  '/user/:userId': {
+    name: 'user', // give the route a name
+    component: { ... }
+  }
+})
+```
+
+To link to a named route, you can use `v-link` like this:
+
+``` html
+<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>
+```
+
+You can also navigate to a named route programatically using `router.go()`:
+
+``` js
+router.go({ name: 'user', params: { userId: 123 }})
+```
+
+In both cases, the router will navigate to the path `/user/123`.