1
2
3
4
5
| <router-view v-slot="{ Component }">
<keep-alive include="ConfigEditorPage,ScriptManagerPage">
<component :is="Component" />
</keep-alive>
</router-view>
|
1
2
3
4
5
| <router-view v-slot="{ Component }">
<keep-alive include="ConfigEditorPage, ScriptManagerPage">
<component :is="Component" />
</keep-alive>
</router-view>
|
奇怪的是，官方文档仅给出了keep-alive，但是却没有指出 component如何提供，查阅其他文档才得知Component来源于v-slot中的Component，也就是当前渲染的组件
- 正确：router-view包裹keep-alive
1
2
3
4
5
| <router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
|
- 错误：keep-alive包裹router-view
1
2
3
| <keep-alive>
<router-view />
</keep-alive>
|
这种写法会给出警告
1
2
3
4
5
6
7
8
| main.js:21 [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
|
