vue 项目中,路由缓存是一个常见的需求和功能,官方文档里面有说到,如果要保存某个组件的状态或避免重新渲染,可以使用 keep-alive 组件,文档里面说的比较简单,就只是用 keep-alive 组件包裹某个或几个组件,这样做的话功能是可以实现,但未免不够优雅(如果我有很多组件都需要做缓存处理,或者某个需要缓存的组件在很多地方都要用到,难道需要在每个使用的地方都写上 keep-alive 吗?太麻烦了,有没有更好的实现方式。)
在一顿 google 之后,找到了一种比较优雅的实现方式。
首先,在 App.vue 这个根组件里面写下如下代码
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
keep-alive 都知道是干嘛用的了,那 v-if 里面的这个 $route.meta.keepAlive 东西是哪里来的呢,这个呢就是我们接下来要做的,写在路由表里面的东西。
每个路由都可以给它定义 meta 属性,我们可以给想要缓存功能的路由定义一个 meta 对象,在里面定义一个 keepAlive 属性,值为 true,这个 meta 对象里面还可以定义其他的属性,比如 title。
{
path: '/guideList',
name: 'GuideList',
meta: {keepAlive: true, title: 'title'},
component: GuideList
},
经过这么一顿骚操作之后,我们就可以在路由表里面灵活的进行配置了,需要缓存的路由就给它配置一下,不需要的就不写或者设置为 false,简单,方便又优雅。