You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/router/advanced/data-fetching.md
+17-18Lines changed: 17 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -4,21 +4,21 @@ type: router
4
4
order: 13
5
5
---
6
6
7
-
# Data Fetching
7
+
# 数据获取
8
8
9
-
Sometimes you need to fetch data from the server when a route is activated. For example, before rendering a user profile, you need to fetch the user's data from the server. We can achieve this in two different ways:
-**Fetching After Navigation**: perform the navigation first, and fetch data in the incoming component's lifecycle hook. Display a loading state while data is being fetched.
Technically, both are valid choices - it ultimately depends on the user experience you are aiming for.
15
+
从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。
16
16
17
-
## Fetching After Navigation
17
+
## 导航完成后获取数据
18
18
19
-
When using this approach, we navigate and render the incoming component immediately, and fetch data in the component's `created` hook. It gives us the opportunity to display a loading state while the data is being fetched over the network, and we can also handle loading differently for each view.
//when route changes when this component is already rendered,
104
-
//the logic will be slightly different.
102
+
//路由改变前，组件就已经渲染完了
103
+
//逻辑稍稍不同
105
104
watch: {
106
105
$route () {
107
106
this.post=null
@@ -117,4 +116,4 @@ export default {
117
116
}
118
117
```
119
118
120
-
The user will stay on the current view while the resource is being fetched for the incoming view. It is therefore recommended to display a progress bar or some kind of indicator while the data is being fetched. If the data fetch fails, it's also necessary to display some kind of global warning message.
When building apps with a bundler, the JavaScript bundle can become quite large and thus affecting page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited.
All we need to do is defining our route components as async components:
13
+
我们要做的就是把路由对应的组件定义成异步组件：
15
14
16
15
```js
17
16
constFoo=resolve=> {
18
-
// require.ensure is Webpack's special syntax for a code-split point.
17
+
// require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
18
+
// （代码分块）
19
19
require.ensure(['./Foo.vue'], () => {
20
20
resolve(require('./Foo.vue'))
21
21
})
22
22
}
23
23
```
24
24
25
-
There's also an alternative code-split syntax using AMD style require, so this can be simplified to:
25
+
这里还有另一种代码分块的语法，使用 AMD 风格的 require，于是就更简单了：
26
26
27
27
```js
28
28
constFoo=resolve=>require(['./Foo.vue'], resolve)
29
29
```
30
30
31
-
Nothing needs to change in the route config, just use `Foo` as usual:
31
+
不需要改变任何路由配置，跟之前一样使用 `Foo`：
32
32
33
33
```js
34
34
constrouter=newVueRouter({
@@ -38,14 +38,14 @@ const router = new VueRouter({
38
38
})
39
39
```
40
40
41
-
### Grouping Components in the Same Chunk
41
+
### 把组件按组分块
42
42
43
-
Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.github.io/docs/code-splitting.html#named-chunks) by providing a chunk name to `require.ensure`as the 3rd argument:
Webpack will group any async module with the same chunk name into the same async chunk - this also means we don't need to explicitly list dependencies for `require.ensure`anymore (thus passing an empty array).
Copy file name to clipboardExpand all lines: src/router/advanced/meta.md
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
---
2
-
title: Route Meta Fields
2
+
title: 路由元信息
3
3
type: router
4
4
order: 11
5
5
---
6
6
7
-
# Route Meta Fields
7
+
# 路由元信息
8
8
9
-
You can include a `meta`field when defining a route:
9
+
定义路由的时候可以配置 `meta`字段：
10
10
11
11
```js
12
12
constrouter=newVueRouter({
@@ -27,15 +27,15 @@ const router = new VueRouter({
27
27
})
28
28
```
29
29
30
-
So how do we access this `meta`field?
30
+
那么如何访问这个 `meta`字段呢？
31
31
32
-
First, each route object in the `routes`configuration is called a **route record**. Route records may be nested. Therefore when a route is matched, it can potentially match more than one route record.
For example, with the above route config, the URL `/foo/bar`will match both the parent route record and the child route record.
34
+
例如，根据上面的路由配置，`/foo/bar`这个 URL 将会匹配父路由记录以及子路由记录。
35
35
36
-
All route records matched by a route are exposed on the `$route`object (and also route objects in navigation guards) as the `$route.matched`Array. Therefore, we will need to iterate over `$route.matched`to check for meta fields in route records.
As the name suggests, the navigation guards provided by `vue-router` are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
Global before guards are called in creation order, whenever a navigation is triggered. Guards may be resolved asynchronously, and the navigation is considered **pending** before all hooks have been resolved.
-**`next(false)`**: abort the current navigation. If the browser URL was changed (either manually by the user or via back button), it will be reset to that of the `from` route.
//called before the route that renders this component is confirmed.
78
-
//does NOT have access to `this` component instance,
79
-
//because it has not been created yet when this guard is called!
79
+
beforeRouteEnter (to, from, next) =>{
80
+
//在渲染该组件的对应路由被 confirm 前调用
81
+
//不！能！获取组件实例 `this`
82
+
//因为当钩子执行前，组件实例还没被创建
80
83
},
81
-
beforeRouteLeave (to, from, next) {
82
-
// called when the route that renders this component is about to
83
-
// be navigated away from.
84
-
// has access to `this` component instance.
84
+
beforeRouteLeave (to, from, next) => {
85
+
// 导航离开该组件的对应路由时调用
86
+
// 可以访问组件实例 `this`
85
87
}
86
88
}
87
89
```
88
90
89
-
The `beforeRouteEnter`guard does **NOT**have access to `this`, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.
However, you can access the instance by passing a callback to `next`. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument:
You can directly access`this` inside `beforeRouteLeave`. The leave guard is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling `next(false)`.
0 commit comments