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
The RouterView component exposes a slot that can be used to render the route component:
3
+
RotuerView 组件暴露了一个插槽,可以用来渲染路由组件:
6
4
7
5
```vue-html
8
6
<router-view v-slot="{ Component }">
9
7
<component :is="Component" />
10
8
</router-view>
11
9
```
12
10
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.
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:
@@ -24,7 +22,7 @@ When working with the [KeepAlive](https://vuejs.org/guide/built-ins/keep-alive.h
24
22
</router-view>
25
23
```
26
24
27
-
Similarly, the slot allows us to use a [Transition](https://vuejs.org/guide/built-ins/transition.html)component to transition between route components:
We can use the slot to pass props or slots to the route component:
51
+
我们可以利用其插槽给路由组件传递 props 或插槽:
54
52
55
53
```vue-html
56
54
<router-view v-slot="{ Component }">
@@ -60,16 +58,16 @@ We can use the slot to pass props or slots to the route component:
60
58
</router-view>
61
59
```
62
60
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.
0 commit comments