使用vue3.0搭建项目,自由的两个组件,Home和about
在之前常见的写法中,使用keep-alive会被缓存?在网上搜寻答案都是可以的,但是实践起来确实不行
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
在vue3.0中使用如下方法可行,使用动态组件的方式
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view v-slot="{ Component }">
<keep-alive include="Home">
<component :is="Component"></component>
</keep-alive>
</router-view>
</div>
</template>