1、使用keep-alive进行缓存
<Suspense>
<div>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
</div>
</Suspense>
页面激活的时候会触发onActivated；
如果存在多级的router-view，需要在每一级写上上面的缓存代码。
2、路由的scrollBehavior
scrollBehavior: (to, from, savedPosition) => {
if (savedPosition) return savedPosition;
return { left: 0, top: 0 };
}
网友评论