vue 中的keep-alive实例代码
更新时间：2018年07月20日 07:56:10 作者：前端那些事儿
这篇文章主要介绍了vue中的keep-alive实例代码，vue实现组件信息缓存的方法，在文中也给大家提到,需要的朋友可以参考下
Vue 实现组件信息的缓存
当我们在开发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的
}，
{
path: '',
name: '',
component: ,
meta: {keepAlive: false} // 这是不会被keepalive的
}
这就实现了部分组件的缓存功能
如果缓存的组件想要清空数据或者执行初始化方法，在加载组件的时候调用activated钩子函数，如下：
activated: function () {
this.data = ‘'
}
总结
以上所述是小编给大家介绍的vue 中的keep-alive实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
相关文章
组件之间通信分为三种：父-子；子-父；跨级组件通信。下面，就组件间如何通信做一些总结。需要的朋友可以参考下2018-11-11
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue3 父控件远程获取数据，在子组件上显示不出来，本文给大家分享两种解决方案帮助大家解决这个问题,需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了vue子组件设计provide和inject理解及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Vue 3 的 Composition API 带来了强大的 reactive 函数,它允许你在 Vue 应用程序中创建响应式数据,本文我们将深入探讨 Vue 3 的 reactive,并提供一些注意事项和解决方案,希望可以帮助打更好地使用它2023-11-11
这篇文章主要介绍了vue.js模版插值的原理与实现方法,结合实例形式简单分析了vue.js模板插值的基本功能、原理、实现方法与注意事项,需要的朋友可以参考下2023-04-04
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
本篇文章主要介绍了详解vue组件化开发-vuex状态管理库，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
在Vue中可以使用Vue.prototype向Vue的全局作用域添加属性或方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
antd Select下拉菜单动态添加option里的内容操作
这篇文章主要介绍了antd Select下拉菜单动态添加option里的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论