docs wip

Author: yyx990803

docs/SUMMARY.md

@@ -2,8 +2,20 @@
 
 - [Installation](installation.md)
 - [Basic Usage](basic.md)
+- [Nested Routes](nested.md)
+- [Route Context](route.md)
+- [v-link](link.md)
 - [Router Options](options.md)
-- [Top Level API](api/README.md)
+- Transition Pipeline
+  - [Overview](pipeline/README.md)
+  - [Transition Object](pipeline/transition.md)
+  - [data](pipeline/data.md)
+  - [activate](pipeline/activate.md)
+  - [deactivate](pipeline/deactivate.md)
+  - [canActivate](pipeline/can-activate.md)
+  - [canDeactivate](pipeline/can-deactivate.md)
+  - [canReuse](pipeline/can-reuse.md)
+- API Reference
   - [router.map](api/map.md)
   - [router.on](api/on.md)
   - [router.redirect](api/redirect.md)
@@ -13,10 +25,3 @@
   - [router.replace](api/replace.md)
   - [router.start](api/start.md)
   - [router.stop](api/stop.md)
-- [View Lifecycle Configuration](config/README.md)
-  - [data](config/data.md)
-  - [activate](config/activate.md)
-  - [deactivate](config/deactivate.md)
-  - [canActivate](config/can-activate.md)
-  - [canDeactivate](config/can-deactivate.md)
-  - [canReuse](config/can-reuse.md)

docs/basic.md

@@ -1,3 +1,60 @@
 # Basic Usage
 
-TODO
+Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, we are already breaking our application into components. When adding vue-router to the mix, all we need to do is map our components to the routes and let vue-router know where to render them. Here's a basic example:
+
+### HTML
+
+``` html
+<div id="app">
+  <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>
+  </p>
+  <!-- route outlet -->
+  <router-view></router-view>
+</div>
+```
+
+### JavaScript
+
+``` js
+// define some components
+var Foo = Vue.extend({
+    template: '<p>This is foo!</p>'
+})
+
+var Bar = Vue.extend({
+    template: '<p>This is bar!</p>'
+})
+
+// the router needs a root component to render.
+// for demo purposes, we will just use an empty one
+// because we are using the HTML as the app template.
+var App = Vue.extend({})
+
+// create a router instance.
+// you can pass in additional options here, but let's
+// keep it simple for now.
+var router = new VueRouter()
+
+// define some routes.
+// each route should map to a component.
+// we'll talk about nested routes later.
+router.map({
+    '/foo': {
+        component: Foo
+    },
+    '/bar': {
+        component: Bar
+    }
+})
+
+// now we can start the app!
+// router will create an instance of App and mount to
+// the element matching the selector #app.
+router.start(App, '#app')
+```
+
+You can also checkout this example [live](http://jsfiddle.net/yyx990803/xyu276sa/).

docs/installation.md

@@ -12,6 +12,17 @@ npm install vue-router
 npm install vuejs/vue-router#dev
 ```
 
+When used in CommonJS, you must explicitly install the router via `Vue.use()`:
+
+``` js
+var Vue = require('vue')
+var VueRouter = require('vue-router')
+
+Vue.use(VueRouter)
+```
+
+You don't need to do this when using the standalone build because it installs itself automatically.
+
 ### Bower
 
 ``` bash

docs/link.md

@@ -0,0 +1 @@
+# v-link

docs/nested.md

@@ -0,0 +1 @@
+# Nested Routes

docs/options.md

@@ -1,3 +1 @@
-# Router Options
-
-TODO
+# Route Options

docs/pipeline/README.md

@@ -0,0 +1,28 @@
+# Transition Pipeline
+
+Route components can configure its transition and data-loading behavior by implementing appropriate transition pipeline hooks. These hooks include:
+
+- `data`
+- `activate`
+- `deactivate`
+- `canActivate`
+- `canDeactivate`
+- `canReuse`
+
+When a route transition is triggered, these hooks will be called in a specific order on affected view components.
+
+A route transition can be divided into three phases:
+
+1. **Reusability phase:**
+
+  Check if any component in the current view hierarchy can be reused in the new one.
+
+2. **Validation phase:**
+
+  Check if all current components can be deactivated, and if all new components can be activated.
+
+3. **Activation phase:**
+
+  Deactivate current components and activate new components.
+
+The diagram below demonstrates the full pipeline of a route transition:

docs/route.md

@@ -0,0 +1 @@
+# Route Context