File tree Expand file tree Collapse file tree 17 files changed +53
-53
lines changed Expand file tree Collapse file tree 17 files changed +53
-53
lines changed Original file line number Diff line number Diff line change 9
9
- [ router-view] ( view.md )
10
10
- [ v-link] ( link.md )
11
11
- [ 切换控制流水线] ( pipeline/README.md )
12
- - [ 切换勾子函数 ] ( pipeline/hooks.md )
12
+ - [ 切换钩子函数 ] ( pipeline/hooks.md )
13
13
- [ data] ( pipeline/data.md )
14
14
- [ activate] ( pipeline/activate.md )
15
15
- [ deactivate] ( pipeline/deactivate.md )
Original file line number Diff line number Diff line change 1
1
# ` router.afterEach(hook) `
2
2
3
- 添加一个全局的后置勾子函数 ,该函数会在每次路由切换** 成功进入激活阶段** 时被调用。
3
+ 添加一个全局的后置钩子函数 ,该函数会在每次路由切换** 成功进入激活阶段** 时被调用。
4
4
5
- 注意,该函数调用时仅仅意味着切换已经被验证过了,也就是所有 ` canDeactivate ` 和 ` canActivate ` 勾子函数都成功的被断定 ( resolved )了,而且浏览器地址栏中的地址也已经更新。并不能保证所有的 ` activate ` 勾子函数都被断定了 。
5
+ 注意,该函数调用时仅仅意味着切换已经被验证过了,也就是所有 ` canDeactivate ` 和 ` canActivate ` 钩子函数都成功的被断定 ( resolved )了,而且浏览器地址栏中的地址也已经更新。并不能保证所有的 ` activate ` 钩子函数都被断定了 。
6
6
7
- 你可以注册多个全局的后置勾子函数 ,这些函数将会按照注册的顺序被同步调用。
7
+ 你可以注册多个全局的后置钩子函数 ,这些函数将会按照注册的顺序被同步调用。
8
8
9
9
### 参数
10
10
11
11
- ` hook {Function} `
12
12
13
- 此勾子函数一个类型为 [ 切换对象] ( ../pipeline/hooks.html#transition-object ) 的参数,但是你只能访问此参数的 ` to ` 和 ` from ` 属性, 这两个属性都是路由对象。在这个后置勾子函数里 ** 不能** 调用任何切换函数。
13
+ 此钩子函数一个类型为 [ 切换对象] ( ../pipeline/hooks.html#transition-object ) 的参数,但是你只能访问此参数的 ` to ` 和 ` from ` 属性, 这两个属性都是路由对象。在这个后置钩子函数里 ** 不能** 调用任何切换函数。
14
14
15
15
### Example
16
16
Original file line number Diff line number Diff line change 1
1
# ` router.beforeEach(hook) `
2
2
3
- 添加一个全局的前置勾子函数 ,这个函数会在路由切换开始时调用。调用发生在整个切换流水线之前。如果此钩子函数拒绝了切换,整个切换流水线根本就不会启动。
3
+ 添加一个全局的前置钩子函数 ,这个函数会在路由切换开始时调用。调用发生在整个切换流水线之前。如果此钩子函数拒绝了切换,整个切换流水线根本就不会启动。
4
4
5
- 你可以注册多个全局的前置勾子函数 。这些函数会按照注册的顺序被调用。调用是异步的,后一个函数会等待前一个函数完成后才会被调用。
5
+ 你可以注册多个全局的前置钩子函数 。这些函数会按照注册的顺序被调用。调用是异步的,后一个函数会等待前一个函数完成后才会被调用。
6
6
7
7
### 参数
8
8
9
9
- ` hook {Function} `
10
10
11
- 此勾子函数一个类型为 [ 切换对象] ( ../pipeline/hooks.html#transition-object ) 的参数。
11
+ 此钩子函数一个类型为 [ 切换对象] ( ../pipeline/hooks.html#transition-object ) 的参数。
12
12
13
13
### Example
14
14
Original file line number Diff line number Diff line change 12
12
13
13
路由配置对象包含两个字段:
14
14
15
- - ` component ` : 当路径匹配时,会渲染到顶级 ` <router-view> ` 的Vue组件 。此字段的值可以是调用 ` Vue.extend ` 后返回的构造函数,或者普通的组件选项对象。在后一种情况下,路由会隐式调用 ` Vue.extend ` 。
15
+ - ` component ` : 当路径匹配时,会渲染到顶级 ` <router-view> ` 的 Vue 组件 。此字段的值可以是调用 ` Vue.extend ` 后返回的构造函数,或者普通的组件选项对象。在后一种情况下,路由会隐式调用 ` Vue.extend ` 。
16
16
17
17
- ` subRoutes ` : 嵌套的子路由映射。对于每一个 ` subRoutes ` 映射中的子路由对象,路由器在做匹配时会使用其路径拼接到父级路径后得到的全路径。成功匹配的组件会渲染到父级组件的 ` <router-view> ` 中。
18
18
Original file line number Diff line number Diff line change 16
16
17
17
- ** ` html5 ` ** : 使用 HTML5 history API ,监听 ` popstate ` 事件。支持 [ ` saveScrollPosition ` ] ( ../options.html#savescrollposition ) .
18
18
19
- - ** ` hash ` ** : 使用 ` location.hash ` ,监听 ` hashchange ` 事件。如果创建路由器时声明 ` history: true ` ,则在不支持hitory模式的路由器下会退化为 hash 模式。
19
+ - ** ` hash ` ** : 使用 ` location.hash ` ,监听 ` hashchange ` 事件。如果创建路由器时声明 ` history: true ` ,则在不支持 hitory 模式的路由器下会退化为 hash 模式。
20
20
21
21
- ** ` abstract ` ** : 不监听任何事件。如果没有 ` window ` 对象(例如非浏览器环境),则会自动退化到此模式。
Original file line number Diff line number Diff line change @@ -16,7 +16,7 @@ npm install vue-router
16
16
npm install vuejs/vue-router#dev
17
17
```
18
18
19
- 如果使用 CommonJS 模块规范, 需要显示的使用 ` Vue.use() ` 安装路由模块:
19
+ 如果使用 CommonJS 模块规范, 需要显式的使用 ` Vue.use() ` 安装路由模块:
20
20
21
21
``` js
22
22
var Vue = require (' vue' )
Original file line number Diff line number Diff line change 7
7
- 默认值: true
8
8
- 只在 hash 模式下可用
9
9
10
- 当 hashbang 值为 true 时,所有的路径都会被格式化为以 ` #! ` 开头。例如 ` router.go('/foo/bar') ` 会把浏览器的URL设为 ` example.com/#!/foo/bar ` 。
10
+ 当 hashbang 值为 true 时,所有的路径都会被格式化为以 ` #! ` 开头。例如 ` router.go('/foo/bar') ` 会把浏览器的 URL 设为 ` example.com/#!/foo/bar ` 。
11
11
12
12
#### history
13
13
57
57
58
58
- 默认值: false
59
59
60
- 当值为 ` true ` 时,在场景切换勾子函数中发生的异常会被吞掉 。
60
+ 当值为 ` true ` 时,在场景切换钩子函数中发生的异常会被吞掉 。
Original file line number Diff line number Diff line change 18
18
19
19
4 . 在执行步骤2和3之前,需要确保切换效果有效 - 也就是说,为保证切换中涉及的所有组件都** 能** 按照期望的那样被停用/激活。
20
20
21
- 使用 vue-router ,你可以控制通过实现切换勾子函数来控制这些步骤 。但是在了解如何做的细节之前,我们先了解一下大局。
21
+ 使用 vue-router ,你可以控制通过实现切换钩子函数来控制这些步骤 。但是在了解如何做的细节之前,我们先了解一下大局。
22
22
23
23
### 切换的各个阶段
24
24
32
32
33
33
2 . ** 验证阶段:**
34
34
35
- 检查当前的组件是否能够停用以及新组件是否可以被激活。这是通过调用路由配置阶段的 ` canDeactivate ` 和 ` canActivate ` 勾子函数来判断的 。
35
+ 检查当前的组件是否能够停用以及新组件是否可以被激活。这是通过调用路由配置阶段的 ` canDeactivate ` 和 ` canActivate ` 钩子函数来判断的 。
36
36
37
37
![ 验证阶段] ( 04.png )
38
38
39
39
注意,` canDeactivate ` 按照从下至上的冒泡顺序检查,而 ` canActivate ` 则是从上之下。
40
40
41
- 任何一个勾子函数都可以终止界面切换 。如果在验证阶段终止了界面切换,路由器会保持当前的应用状态,恢复到前一个路径。
41
+ 任何一个钩子函数都可以终止界面切换 。如果在验证阶段终止了界面切换,路由器会保持当前的应用状态,恢复到前一个路径。
42
42
43
43
3 . ** 激活阶段:**
44
44
45
- 一旦所有的验证勾子函数都被调用而且没有终止切换 ,切换就可以认定是合法的。路由器则开始禁用当前组件并启用新组件。
45
+ 一旦所有的验证钩子函数都被调用而且没有终止切换 ,切换就可以认定是合法的。路由器则开始禁用当前组件并启用新组件。
46
46
47
47
![ 激活阶段] ( 05.png )
48
48
49
- 此阶段对应勾子函数的调用顺序和验证阶段相同 ,其目的是在组件切换真正执行之前提供一个进行清理和准备的机会。界面的更新会等到所有受影响组件的 ` deactivate ` 和 ` activate ` 勾子函数执行之后才进行 。
49
+ 此阶段对应钩子函数的调用顺序和验证阶段相同 ,其目的是在组件切换真正执行之前提供一个进行清理和准备的机会。界面的更新会等到所有受影响组件的 ` deactivate ` 和 ` activate ` 钩子函数执行之后才进行 。
50
50
51
- ` data ` 这个勾子函数会在 ` activate ` 之后被调用,或者当前组件组件可以重用时也会被调用。
51
+ ` data ` 这个钩子函数会在 ` activate ` 之后被调用,或者当前组件组件可以重用时也会被调用。
52
52
53
- 接下来我们会谈论一下切换过程中各个勾子函数的细节 。
53
+ 接下来我们会谈论一下切换过程中各个钩子函数的细节 。
Original file line number Diff line number Diff line change 6
6
7
7
- [ ` transition {Transition} ` ] ( hooks.md#transition-object )
8
8
9
- 调用 ` transition.next() ` 可以断定( resolve )这个勾子函数 。注意,这里调用 ` transition.abort() ` 并不会把应用回退到前一个路由状态因为此时切换已经被确认合法了。
9
+ 调用 ` transition.next() ` 可以断定( resolve )这个钩子函数 。注意,这里调用 ` transition.abort() ` 并不会把应用回退到前一个路由状态因为此时切换已经被确认合法了。
10
10
11
11
### 返回值
12
12
13
- - 可选择性返回Promise 。
13
+ - 可选择性返回 Promise 。
14
14
- ` resolve ` -> ` transition.next() `
15
15
- ` reject(reason) ` -> ` transition.abort(reason) `
16
16
17
17
### 详情
18
18
19
19
多数时候,这个函数用于控制视图转换的时机,因为视图切换会在这个函数被断定( resolved )之后开始。
20
20
21
- 这个勾子会从上至下进行调用 。子组件视图的 ` activate ` 只会在父级组件视图 ` activate ` 被断定( resolved )之后执行。
21
+ 这个钩子会从上至下进行调用 。子组件视图的 ` activate ` 只会在父级组件视图 ` activate ` 被断定( resolved )之后执行。
Original file line number Diff line number Diff line change 6
6
7
7
- [ ` transition {Transition} ` ] ( hooks.md#transition-object )
8
8
9
- 调用 ` transition.next() ` 可以断定( resolve )此勾子函数 。调用 ` transition.abort() ` 可以无效化并取消此次切换。
9
+ 调用 ` transition.next() ` 可以断定( resolve )此钩子函数 。调用 ` transition.abort() ` 可以无效化并取消此次切换。
10
10
11
11
### 返回值
12
12
23
23
24
24
### 详情
25
25
26
- 此勾子函数的调用顺序是从上之下 。子级组件视图的 ` canActivate ` 勾子仅在父级组件的 ` canActivate ` 被断定( resolved )之后调用。
26
+ 此钩子函数的调用顺序是从上之下 。子级组件视图的 ` canActivate ` 钩子仅在父级组件的 ` canActivate ` 被断定( resolved )之后调用。
You can’t perform that action at this time.
0 commit comments