背景
最近做的需求有一个场景,在登录页面有一个协议,用户点击这个协议会跳转到另一个页面查看当前协议,此时就有一个问题,当用户跳转到协议页面查看协议的时候,在返回登录页面,页面重新刷新了,之前填写的信息就不存在了。
解决办法
keep-alive
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。
代码示例
// App.vue
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
// 需要缓存的页面
{
path: '/',
name: 'Home',
component: Home,
meta: {
keepAlive: true, // 此组件需要被缓存
}
},
总结
理解可能还没有那么深入,慢慢了解。欢迎大家留言~