@@ -15,31 +15,42 @@ export default {
15
15
}
16
16
} ,
17
17
render ( _ , { props, children, parent, data } ) {
18
+ /* 标记位,标记是route-view组件 */
18
19
data . routerView = true
19
20
20
21
// directly use parent context's createElement() function
21
22
// so that components rendered by router-view can resolve named slots
23
+ /* 直接使用父组件的createElement函数 */
22
24
const h = parent . $createElement
25
+ /* props的name,默认'default' */
23
26
const name = props . name
27
+ /* option中的VueRouter对象 */
24
28
const route = parent . $route
29
+ /* 在parent上建立一个缓存对象 */
25
30
const cache = parent . _routerViewCache || ( parent . _routerViewCache = { } )
26
31
27
32
// determine current view depth, also check to see if the tree
28
33
// has been toggled inactive but kept-alive.
34
+ /* 记录组件深度 */
29
35
let depth = 0
36
+ /* 标记是否是待用(非alive状态)) */
30
37
let inactive = false
38
+ /* _routerRoot中中存放了跟组件的势力,这边循环向上级访问,直到访问到根组件,得到depth深度 */
31
39
while ( parent && parent . _routerRoot !== parent ) {
32
40
if ( parent . $vnode && parent . $vnode . data . routerView ) {
33
41
depth ++
34
42
}
43
+ /* 如果_inactive为true,代表是在keep-alive中且是待用(非alive状态) */
35
44
if ( parent . _inactive ) {
36
45
inactive = true
37
46
}
38
47
parent = parent . $parent
39
48
}
49
+ /* 存放route-view组件的深度 */
40
50
data . routerViewDepth = depth
41
51
42
52
// render previous view if the tree is inactive and kept-alive
53
+ /* 如果inactive为true说明在keep-alive组件中,直接从缓存中取 */
43
54
if ( inactive ) {
44
55
return h ( cache [ name ] , data , children )
45
56
}
0 commit comments