当我们在开发 vue 的项目过程中, 避免不了在路由切换到其他的 component 再返回后该组件数据会重新加载, 处理这种情况我们就需要用到 keep-alive 来缓存 vue 的组件信息, 使其不再重新加载.
一, 在 App.vue 里
- <keep-alive>
- <router-view></router-view>
- </keep-alive>
但是这种情况会对所有的组件进行缓存, 不能达到单个组件缓存的效果.
那么我们给部分组件加上, 实现方法如下:
在 App.vue
- <!-- 这里是需要 keepalive 的 -->
- <keep-alive>
- <router-view v-if="$route.meta.keepAlive"></router-view>
- <keep-alive>
- <!-- 这里不会被 keepAlive -->
- <router-view v-if="!$route.meta.keepAlive"></router-view>
二, 在路由的 index.JS 页面里
- {
- path: '',
- name: '',
- component: '',
- meta: {keepAlive: true} // 这个是需要 keepalive 的
- },// 欢迎加入全栈开发交流圈一起学习交流: 864305860
- {// 帮助突破技术瓶颈, 提升思维能力
- path: '',
- name: '',
- component: ,
- meta: {keepAlive: false} // 这是不会被 keepalive 的
- }
这就实现了部分组件的缓存功能
如果缓存的组件想要清空数据或者执行初始化方法, 在加载组件的时候调用 activated 钩子函数, 如下:
- activated: function () {
- this.data = ''
- }
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/7523a78662a4ce6fca419ea7ac3f599d.html