Skip to content

Commit f098345

Browse files
yyx990803yyx990803
committed
Merge branch 'next-doc' into next
2 parents fbb0617 + 7da090a commit f098345

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+8207
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ selenium-debug.log
77
dist/*.gz
88
dist/*.map
99
explorations
10+
docs/_book

‎build/update-docs.sh

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
cd docs
2+
rm -rf _book
3+
gitbook build
4+
cp assets/circle.yml _book/circle.yml
5+
cp assets/CNAME _book/CNAME
6+
cd _book
7+
git init
8+
git add -A
9+
git commit -m 'update book'
10+
git push -f [email protected]:vuejs/vue-router.git master:gh-pages

‎docs/LANGS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* [English](en/)

‎docs/assets/CNAME

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
rc.router.vuejs.org

‎docs/assets/circle.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
general:
2+
branches:
3+
ignore:
4+
- gh-pages

‎docs/assets/illustrations.ai

Lines changed: 6381 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/book.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"gitbook": "2.x.x",
3+
"plugins": ["edit-link", "github"],
4+
"pluginsConfig": {
5+
"edit-link": {
6+
"base": "https://github.com/vuejs/vue-router/tree/master/docs",
7+
"label": "Edit This Page"
8+
},
9+
"github": {
10+
"url": "https://github.com/vuejs/vue-router/"
11+
}
12+
},
13+
"links": {
14+
"sharing": {
15+
"facebook": false,
16+
"twitter": false
17+
}
18+
}
19+
}

‎docs/en/README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# vue-router documentation [![npm package](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router)
2+
3+
**[Release Notes](https://github.com/vuejs/vue-router/releases)**
4+
5+
- [Installation](installation.md)
6+
- [Getting Started](getting-started/README.md)
7+
- [Basic Usage](getting-started/basic.md)
8+
- [Route Object & Route Matching](getting-started/route.md)
9+
- [Named Routes](getting-started/named-routes.md)
10+
- [Programmatic Navigation](getting-started/navigation.md)
11+
- [router-link](getting-started/link.md)
12+
- [router-view](getting-started/view.md)
13+
- [Advanced Routing](advanced-routing/README.md)
14+
- [Nested Routes](advanced-routing/nested.md)
15+
- [Named Views](advanced-routing/named-views.md)
16+
- [Lazy Loading Routes](advanced-routing/lazy.md)
17+
- [Async Routes](advanced-routing/async-routes.md)
18+
- [Navigation](navigation/README.md)
19+
- [Router Hooks](navigation/router-hooks.md)
20+
- [Routes Hooks](navigation/routes-hooks.md)
21+
- [Views Transitions](navigation/views-transitions.md)
22+
- [API](api/README.md)
23+
- [VueRouter](api/router/README.md)
24+
- [constructor](api/router/constructor.md)
25+
- [currentRoute](api/router/current-route.md)
26+
- [beforeEach](api/router/before-each.md)
27+
- [afterEach](api/router/after-each.md)
28+
- [push](api/router/push.md)
29+
- [replace](api/router/replace.md)
30+
- [go](api/router/go.md)
31+
- [back](api/router/back.md)
32+
- [forward](api/router/back.md)
33+
- [getMatchedComponents](api/router/get-matched-components.md)
34+
- [$route](api/route.md)
35+
- [router-link](api/router-link.md)
36+
- [router-view](api/router-view.md)
37+
- [beforeRouteEnter](api/beforeRouteEnter.md)
38+
- [beforeRouteLeave](api/beforeRouteLeave.md)
39+
- [beforeEnter](api/beforeEnter.md)
40+
- [Types](api/types/README.md)
41+
- [RouterOptions](api/types/router-options.md)
42+
- [RedirectOption](api/types/redirect-option.md)
43+
- [RouteConfig](api/types/route-config.md)
44+
- [RouteRecord](api/types/route-record.md)
45+
- [RouteMap](api/types/route-map.md)
46+
- [StringHash](api/types/string-hash.md)
47+
- [Location](api/types/location.md)
48+
- [RawLocation](api/types/raw-location.md)
49+
- [Route](api/types/route.md)
50+
- [Matcher](api/types/matcher.md)

‎docs/en/SUMMARY.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
- [Installation](installation.md)
2+
- Getting Started
3+
- [Basic Usage](getting-started/basic.md)
4+
- [Route Object & Route Matching](getting-started/route.md)
5+
- [Named Routes](getting-started/named-routes.md)
6+
- [Programmatic Navigation](getting-started/navigation.md)
7+
- [<router-link>](getting-started/link.md)
8+
- [<router-view>](getting-started/view.md)
9+
- Advanced Routing
10+
- [Nested Routes](advanced-routing/nested.md)
11+
- [Named Views](advanced-routing/named-views.md)
12+
- [Lazy Loading Routes](advanced-routing/lazy.md)
13+
- [Async Routes](advanced-routing/async-routes.md)
14+
- Navigation
15+
- [Router Hooks](navigation/router-hooks.md)
16+
- [Routes Hooks](navigation/routes-hooks.md)
17+
- [Views Transitions](navigation/views-transitions.md)
18+
- [API](api/README.md)
19+
- [VueRouter](api/router/README.md)
20+
- [constructor](api/router/constructor.md)
21+
- [currentRoute](api/router/current-route.md)
22+
- [beforeEach](api/router/before-each.md)
23+
- [afterEach](api/router/after-each.md)
24+
- [push](api/router/push.md)
25+
- [replace](api/router/replace.md)
26+
- [go](api/router/go.md)
27+
- [back](api/router/back.md)
28+
- [forward](api/router/back.md)
29+
- [getMatchedComponents](api/router/get-matched-components.md)
30+
- [$route](api/route.md)
31+
- [router-link](api/router-link.md)
32+
- [router-view](api/router-view.md)
33+
- [beforeRouteEnter](api/beforeRouteEnter.md)
34+
- [beforeRouteLeave](api/beforeRouteLeave.md)
35+
- [beforeEnter](api/beforeEnter.md)
36+
- [Types](api/types/README.md)
37+
- [RouterOptions](api/types/router-options.md)
38+
- [RedirectOption](api/types/redirect-option.md)
39+
- [RouteConfig](api/types/route-config.md)
40+
- [RouteRecord](api/types/route-record.md)
41+
- [RouteMap](api/types/route-map.md)
42+
- [StringHash](api/types/string-hash.md)
43+
- [Location](api/types/location.md)
44+
- [RawLocation](api/types/raw-location.md)
45+
- [Route](api/types/route.md)
46+
- [Matcher](api/types/matcher.md)

‎docs/en/advanced-routing/async-routes.md

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# Async Routes
2+
3+
Sometimes you need to fetch data from the server before rendering a route. For
4+
example, before visiting a user profile, you have to fetch his data from the
5+
server. We can achieve this in two different ways. Each way provide a different
6+
UX approach and both of them are valid designs.
7+
8+
9+
## Fetching before navigation
10+
11+
This method consists on fetching the data before actually navigating to the new
12+
route. For those using vue-router 1, this works as the `activate` hook. In
13+
vue-router 2 you use the `beforeRouteEnter` hook to control the navigation flow.
14+
You get access to the `route`, a `redirect` function and a `next` callback to
15+
let the navigation end. Not calling the `next` callback will simply cancel the
16+
navigation. Note that this hook is
17+
18+
``` js
19+
export default {
20+
data () {
21+
return {
22+
loading: false,
23+
post: null,
24+
error: null
25+
}
26+
},
27+
beforeRouteEnter (route, redirect, next) {
28+
// fetch the data when the view is created and the data is
29+
// already being observed
30+
this.fetchData(route.params.id, next)
31+
},
32+
watch: {
33+
// call again the method if the route changes
34+
$route () {
35+
this.fetchData(this.$route.params.id)
36+
}
37+
},
38+
methods: {
39+
fetchData (id, cb) {
40+
this.error = this.post = null
41+
this.loading = true
42+
getPost(id, (err, post) => {
43+
this.loading = false
44+
if (err) {
45+
this.error = err.toString()
46+
} else {
47+
this.post = post
48+
}
49+
cb && cb()
50+
})
51+
}
52+
}
53+
}
54+
```
55+
56+
The user still can use the application while the resource is being fetched. It
57+
is therefore recommended to show him with a progress bar or any other indicator
58+
that the web site is waiting for data. If, during this time, the user navigates
59+
somewhere else by clicking on a link, the navigation waiting for data will never
60+
take place.
61+
62+
## Fetching inside the view
63+
64+
This method consists on fetching data during the component lifecycle. It allows
65+
you to define how the content of your view is presented while the resources are
66+
loading. Using this approach let you handle how loading in handled differently
67+
for each view.
68+
69+
Replacing `beforeRouteEnter` with `created` is almost all you need to do to
70+
switch to the other fetching method.
71+
72+
``` js
73+
export default {
74+
data () {
75+
return {
76+
loading: false,
77+
post: null,
78+
error: null
79+
}
80+
},
81+
created () {
82+
// fetch the data when the view is created and the data is
83+
// already being observed
84+
this.fetchData()
85+
},
86+
watch: {
87+
// call again the method if the route changes
88+
'$route': 'fetchData'
89+
},
90+
methods: {
91+
fetchData () {
92+
this.error = this.post = null
93+
this.loading = true
94+
getPost(this.$route.params.id, (err, post) => {
95+
this.loading = false
96+
if (err) {
97+
this.error = err.toString()
98+
} else {
99+
this.post = post
100+
}
101+
})
102+
}
103+
}
104+
}
105+
```
106+
107+
The component lifecycle will go on and once the data is fetched, the view will update acordingly. This way you can choose what to show while the data is being fetched. Here we're just displaying _Loading..._:
108+
109+
``` html
110+
<template>
111+
<div class="post">
112+
<div class="loading" v-if="loading">Loading...</div>
113+
<div v-if="error" class="error">
114+
{{ error }}
115+
</div>
116+
<transition name="slide">
117+
<!--
118+
giving the post container a unique key triggers transitions
119+
when the post id changes.
120+
-->
121+
<div v-if="post" class="content" :key="post.id">
122+
<h2>{{ post.title }}</h2>
123+
<p>{{ post.body }}</p>
124+
</div>
125+
</transition>
126+
</div>
127+
</template>
128+
```

0 commit comments

Comments
 (0)