more docs

Author: yyx990803

docs/SUMMARY.md

@@ -3,10 +3,10 @@
 - [Installation](installation.md)
 - [Basic Usage](basic.md)
 - [Nested Routes](nested.md)
-- [Route Object](route.md)
+- [Route Object & Route Matching](route.md)
+- [Router Options](options.md)
 - [router-view](view.md)
 - [v-link](link.md)
-- [Router Options](options.md)
 - Transition Pipeline
   - [Overview](pipeline/README.md)
   - [Transition Object](pipeline/transition.md)

docs/link.md

@@ -1 +1,25 @@
 # v-link
+
+You should use the `v-link` directive for handling navigations inside a vue-router-enabled app 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.
+
+- In HTML5 history mode, `v-link` will intercept the click event so that the browser doesn't try to reload the page.
+
+- When you are using the `root` option in HTML5 history mode, you don't need to include it in `v-link` URLs.
+
+#### Active Link Class
+
+Elements with `v-link` will automatically get corresponding class names when the current path matches its `v-link` URL:
+
+- The `.v-link-active` class is applied to the element when the current path starts with the `v-link` URL. For example, an element with `v-link="/a"` will get this class as long as the current path starts with `/a`.
+
+- The `.v-link-active-exact` class is applied when the current path is an exact match of the `v-link` URL.
+
+The active link class name can be configured with the `activeLinkClass` option when creating the router instance. The exact match class simply appends `-exact` postfix to the provided class name.
+
+#### 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/options.md

@@ -1 +1,60 @@
 # Route Options
+
+There are a number of options you can use to customize the router behavior when creating a router instance.
+
+#### hashbang
+
+- default: true
+- only used in hash mode
+
+  When the hashbang option is true, all hash paths will be formated to start with `#!`. For example `router.go('/foo/bar')` will set the browser URL to `example.com/#!/foo/bar`.
+
+#### history
+
+- default: false
+
+  Enables HTML5 history mode. Leverages `history.pushState()` and `history.replaceState()` for history management.
+
+  **Note**: when using the history mode, the server needs to be [properly configured](http://readystate4.com/2012/05/17/nginx-and-apache-rewrite-to-support-html5-pushstate/) so that a user directly visiting a deep link on your site doesn't get a 404.
+
+####  abstract
+
+- default: false
+
+  Use an abstract history backend that doesn't rely on the browser. The abstract mode is useful in testing or in environments where actual URLs doesn't matter, for example in Electron or Cordova apps. The router will also fallback into abstract mode if loaded in a non-browser environment.
+
+#### root
+
+- default: null
+- only used in HTML5 history mode
+
+  Define a root path for all router navigations. All paths used in route configurations, `router.go()`, `v-link` and exposed on route objects will be resolved relative to this root path, and the root path will always be included in the actual browser URL.
+
+  For example, with `root: '/foo'`, `v-link="/bar"` will set the browser URL to `/foo/bar`. Directly visiting `/foo/bar` will match against `/bar` in your route config.
+
+  In most cases, `root` is set-and-forget: you don't have to worry about it in your application code.
+
+#### linkActiveClass
+
+- default: `"v-link-active"`
+
+  Configures the class to be applied to `v-link` elements when the current path matches its URL. The base class is applied as long as the current path starts with the `v-link` URL; when the current path matches the `v-link` URL exactly, an additional class with the `-exact` postfix will also be applied,the default being `v-link-active-exact`. So if you configure the class to be `my-custom-active`, the exact match class will be `my-custom-active-exact`.
+
+#### saveScrollPosition
+
+- default: false
+- only used in HTML5 history mode
+
+  This option leverages the state associated with an HTML5 history `popstate` event to restore the scroll position when the user hits the back button. Note this might not work as expected if your `<router-view>` has transition effects.
+
+#### transitionOnLoad
+
+- default: false
+
+  Whether to apply transition effect for `<router-view>`s on initial load. By default the components matched on initial load are rendered instantly.
+
+#### suppressTransitionError
+
+- default: false
+
+  If set to `true`, uncaught errors inside transition hooks will be suppressed.

docs/route.md

@@ -1,4 +1,4 @@
-# Route Object
+# Route Object & Route Matching
 
 Vue-router supports matching paths that contain dynamic segments, star segments and query strings. All these information of a parsed route will be accessible on the exposed **Route Context Objects** (we will just call them "route" objects from now on). The route object will be injected into every component in a vue-router-enabled app as `this.$route`, and will be updated whenever a route transition is performed.
 

docs/view.md

@@ -0,0 +1,13 @@
+# `<router-view>`
+
+The `<router-view>` element is used as outlets for rendering matched components. It is based upon Vue's dynamic component system, and therefore inherits many features from a normal dyanmic component:
+
+- You can pass props to it.
+- HTML content inside the `<router-view>` will be used for content insertion in the rendered component.
+- `v-transition` and `transition-mode` are fully supported. Note: for transition effects to work, your route component must not be a [fragment instance](http://vuejs.org/guide/best-practices.html#Fragment_Instance).
+- `v-ref` is also supported; The rendered component will be registered in the parent component's `this.$` object.
+
+However, there are also a few limitations:
+
+- `keep-alive` is not supported as of now.
+- `wait-for` is not supported. You should be using the [`activate` transition hook](pipeline/activate.html) to control the timing of the transition.