Skip to content

Commit 382025a

Browse files
yionrJinjiang
andauthored
docs(cn): translate RouterView slot Chapter into Chinese (#2092)
* Update router-view-slot.md * chore: update checkpoint * Update packages/docs/zh/guide/advanced/router-view-slot.md Co-authored-by: Jinjiang <[email protected]> * Update packages/docs/zh/guide/advanced/router-view-slot.md Co-authored-by: Jinjiang <[email protected]> * Update packages/docs/zh/guide/advanced/router-view-slot.md Co-authored-by: Jinjiang <[email protected]> * Revert "chore: update checkpoint" This reverts commit 69d42f6. * Update router-view-slot.md --------- Co-authored-by: Jinjiang <[email protected]>
1 parent 6af14a6 commit 382025a

File tree

1 file changed

+13
-15
lines changed

1 file changed

+13
-15
lines changed
Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
<!-- TODO: translation -->
1+
# RouterView 插槽
22

3-
# RouterView slot
4-
5-
The RouterView component exposes a slot that can be used to render the route component:
3+
RotuerView 组件暴露了一个插槽,可以用来渲染路由组件:
64

75
```vue-html
86
<router-view v-slot="{ Component }">
97
<component :is="Component" />
108
</router-view>
119
```
1210

13-
The code above is equivalent to using `<router-view />` without the slot, but the slot provides extra flexibility when we want to work with other features.
11+
上面的代码等价于不带插槽的 `<router-view />`,但是当我们想要获得其他功能时,插槽提供了额外的扩展性。
1412

1513
## KeepAlive & Transition
1614

17-
When working with the [KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.html) component, we would usually want it to keep the route components alive, not the RouterView itself. We can achieve that by putting the KeepAlive inside the slot:
15+
当在处理 [KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.html) 组件时,我们通常想要保持路由组件活跃,而不是 RouterView 本身。为了实现这个目的,我们可以将 KeepAlive 组件放置在插槽内:
1816

1917
```vue-html
2018
<router-view v-slot="{ Component }">
@@ -24,7 +22,7 @@ When working with the [KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.h
2422
</router-view>
2523
```
2624

27-
Similarly, the slot allows us to use a [Transition](https://vuejs.org/guide/built-ins/transition.html) component to transition between route components:
25+
类似地,插槽允许我们使用一个 [Transition](https://vuejs.org/guide/built-ins/transition.html) 组件来实现在路由组件之间切换时实现过渡效果:
2826

2927
```vue-html
3028
<router-view v-slot="{ Component }">
@@ -34,7 +32,7 @@ Similarly, the slot allows us to use a [Transition](https://vuejs.org/guide/buil
3432
</router-view>
3533
```
3634

37-
We can also use KeepAlive inside a Transition:
35+
我们也可以在 Transaction 组件内使用 KeepAlive 组件:
3836

3937
```vue-html
4038
<router-view v-slot="{ Component }">
@@ -46,11 +44,11 @@ We can also use KeepAlive inside a Transition:
4644
</router-view>
4745
```
4846

49-
For more information about using RouterView with the Transition component, see the [Transitions](./transitions) guide.
47+
关于更多 RouterView 组件和 Transition 组件之间的互动,请参考 [Transitions](./transitions) 指南。
5048

51-
## Passing props and slots
49+
## 传递 props 和插槽
5250

53-
We can use the slot to pass props or slots to the route component:
51+
我们可以利用其插槽给路由组件传递 props 或插槽:
5452

5553
```vue-html
5654
<router-view v-slot="{ Component }">
@@ -60,16 +58,16 @@ We can use the slot to pass props or slots to the route component:
6058
</router-view>
6159
```
6260

63-
In practice, this usually isn't something you would want to do, as the route components would **all need to use the same props and slots**. See [Passing Props to Route Components](../essentials/passing-props) for other ways to pass props.
61+
实践中通常不会这么做,因为这样会导致所有路由组件**都使用相同的 props 和插槽**。请查阅[传递 props 给路由组件](../essentials/passing-props)获取其他传递 props 的方式。
6462

65-
## Template refs
63+
## 模板引用
6664

67-
Using the slot allows us to put a [template ref](https://vuejs.org/guide/essentials/template-refs.html) directly on the route component:
65+
使用插槽可以让我们直接将[模板引用](https://vuejs.org/guide/essentials/template-refs.html)放置在路由组件上:
6866

6967
```vue-html
7068
<router-view v-slot="{ Component }">
7169
<component :is="Component" ref="mainContent" />
7270
</router-view>
7371
```
7472

75-
If we put the ref on the `<router-view>` instead then the ref would be populated with the RouterView instance, rather than the route component.
73+
而如果我们将引用放在 `<router-view>` 上,那引用将会被 RouterView 的实例填充,而不是路由组件本身。

0 commit comments

Comments
 (0)