vue中keep-alive缓存功能使用详解

当我们在开发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 = ‘'
}

原文链接：http://www.php.cn/js-tutorial-395762.html

转载于:https://www.cnblogs.com/grt322/articles/9304010.html

vue中keep-alive缓存功能使用详解相关推荐

vue build text html,Vue中v-text / v-HTML使用实例代码详解_放手_前端开发者
废话少说,代码如下所述: /p> 显示123 /p> 补充:vuejs {{}},v-text 和 v-html的区别 {{message}} let app = new Vue({ el ...
Vue 中 Dep 和 Observer 的用法详解
Vue 中响应式系统利用了订阅发布模式来实现基本的逻辑.本文将介绍其中的两个重要角色,他们就是Dep和Observer.其中Observer 是观察者和 Dep是订阅收集和发布者.另外watcher是 ...
vue中监听属性watch使用详解
深度监听: (1)vue中的watch默认不监测对象内部值的改变(一层). (2)配置deep:true可以监测对象内部值改变(多层). 备注: (1)vue自身可以监测对象内部值的改变,但vue提供 ...
Vue中ESlint配置文件eslintrc.js文件详解
最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓狂,现在总结一下这些命令的解释,方便以后查阅. 默认 ...
VUE中$refs和$el的使用详解
ref: 给元素或者子组件注册引用信息 ref有三种用法: 1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素. <div ref="system" ...
vue中模板编译compiler源码详解
vue编译模板过程; <div><h1>这是compiler</h1> <p v-if="message">{{ message } ...
vue中的slot（插槽）详解
最近忙着写一些组件,关于插槽这一块自己还是用着 slot 和 slot-scope,然后看了一下文档的更新,于是又重新把"插槽"学习了一篇,下面一段是文档中的说明: 在 2.6.0 ...
android收藏功能demo,Android使用Realm数据库实现App中的收藏功能(代码详解)
前言 App数据持久化功能是每个App必不可少的功能,而Android最常用的数据持久化方式主要有以下的五种方式: 使用SharedPreferences存储数据: 文件存储数据: SQLite数据 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
ASP.NET 2.0 中改进的缓存功能
摘要:本文中,Stephen Walther 将重点介绍 ASP.NET 2.0 中新增的缓存功能,以及如何使用这些新功能改进 ASP.NET 应用程序的性能和可扩展性.(本文包含一些指向英文站点的链 ...

vue中keep-alive缓存功能使用详解

vue中keep-alive缓存功能使用详解相关推荐

最新文章

热门文章