精华内容
下载资源
问答
  • 2019-08-06 18:58:38

    QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票

    VUE.JS 使用缓存我建议用 good-storage ,简单方便好用,下面来看看怎么使用它

    good-storage 是一个插件,需要安装

    localStorage 临时缓存(主动清除缓存才会销毁)

    sessionStorage 长期缓存(关闭浏览器自动销毁)

    安装步骤:

    在命令行安装

    npm install good-storage

    使用:

    import storage from 'good-storage'
     
     // localStorage
     storage.set(key,val) 
     
     storage.get(key, def)
     
     // sessionStorage
     storage.session.set(key, val)
     
     storage.session.get(key, val)

    缓存的API

    set(key, val)
    set storage with key and val
    
    get(key, def)
    get storage with key, return def if not find
    
    remove(key)
    remove storage with key
    
    has(key)
    determine storage has the key
    
    clear()
    clear all storages
    
    getAll()
    get all the storages
    
    forEach(callback)
    forEach the storages and call the callback function with each storage
    

     

    更多相关内容
  • 彻底清除vue缓存

    2021-05-27 10:32:46
    彻底清除vue缓存彻底清除vue缓存 彻底清除vue缓存 watch:{ '$route.path':function(newVal,oldVal){ this.$destroy(this.$options._parentVnode.tag) } },

    彻底清除vue缓存

    彻底清除vue缓存

    watch:{
          '$route.path':function(newVal,oldVal){
            this.$destroy(this.$options._parentVnode.tag)
          }
        },
    
    展开全文
  • vue缓存路由组件

    千次阅读 2022-03-29 13:51:01
    使用场景描述: news组件中有输入框,输入内容 输入内容后切到message组件,再切回来,输入框中的内容不存在(因为切换路由时,组件会进行销毁) News的内容在Home中展示 【注:如果要缓存多个组件的话 】 include...

    使用场景描述:

    news组件中有输入框,输入内容

    输入内容后切到message组件,再切回来,输入框中的内容不存在(因为切换路由时,组件会进行销毁)

    News的内容在Home中展示

     

     

    【注:如果要缓存多个组件的话

            <keep-alive :include="['News','Message']">

                    <router-view></router-view>

            </keep-alive>

    】 

     include后面的引号里面是组件的名称,要和name相对应

    展开全文
  • 主要介绍了vue缓存的keepalive页面刷新数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 详解Vue中组件的缓存

    2020-10-17 03:20:07
    主要介绍了Vue中组件的缓存,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了vue路由缓存的几种实现方式,结合实例形式详细分析了vue.js路由缓存常见实现方式、使用技巧与操作注意事项,需要的朋友可以参考下
  • Vue缓存路由(keep-alive)以及新的生命周期

    缓存路由

    keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

    假设我们有登录,注册两个路由组件。登录组件切换到注册组件,登录组件的生命周期,从进入时的创建到离开时的销毁。当我们页面从注册组件切换回登录组件的时候。登录组件已经被销毁了,之前的数据是不会存在的。这是时候我们可以用keep-alive 来保存数据。

    使用方式:在keep-alive里面放入要缓存的组件。

    被keep-alive包裹的所有组件,都还不会销毁以及重新渲染。

    来验证一下:

    App.vue

    <template>
      <div id="app">
        <keep-alive>
          <router-view/>
        </keep-alive>
      </div>
    </template>
    
    <style lang="scss">
    
    
    </style>
    

    注册组件:生成一个随机数,点击登录的时候,传递参数。

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>注册</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="Regist">注册</el-button>
                <div style="margin-top: 20px">
                    <button @click="toLogin">登录</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name: "Regist",
            data(){
                return {
                    userName:'',
                    pwd:'',
                    id:Math.random()
                }
            },
            methods:{
                Regist(){
    
                },
                toLogin(){
                    this.$router.push({
                        path: '/Login',
                        query:{//传参
                            id:this.id
                        }
                    })
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    登录组件:

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>登录</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
                <div style="margin-top: 20px">
                    <button @click="toRegist">注册</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name:'Login',
            data(){
                return {
                    userName:'',
                    pwd:'',
                }
            },
            methods:{
                toRegist(){
                    this.$router.go(-1)
                },
                login(){
                    // localStorage.setItem('token','fdfjkdfjksdfdkf');
                    this.$router.push('/index')
                }
            },
            created(){//接收参数,赋值给userName
                this.userName = this.$route.query.id
            },
            beforeDestroy(){
                console.log('我马上被销毁了');
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    效果图:

    第二次切换:

     

    问题来了,这时候我们会发现,第一次和第二次传递过来的随机数是一样的。

    原因是注册组件也被缓存起来了,并不会重新执行。所以传的随机数是一样的。

    那有什么可以使注册组件不被缓存呢?这就需要用到include以及exclude属性

    • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
    • 官方文档:API — Vue.js

    代码:

    <template>
      <div id="app">
        <!--include:匹配的组件会被缓存-->
        <!--注意:include的value值是组件的name值-->
        <!--如果router-view有多个组件都需要被缓存。可以使用数组的形式  :include="['Login','Regist']"  -->
        <!--exclude:匹配的组件都不会被缓存-->
    
        <keep-alive include="Login">
          <router-view/>
        </keep-alive>
    
    
        <!--<router-view/>-->
      </div>
    </template>
    
    <style lang="scss">
    
    
    </style>
    

    两个新的生命周期钩子

    作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。只适用于keep-alive

    activated :路由组件被激活时触发。(当进入缓存的路由组件时触发)

    deactivated:路由组件失活时触发。(当离开缓存的路由组件时触发)

    使用方法:

    接着上面的代码,我们之缓存了Login组件,Regist组件并没有被缓存。所以现在的效果是每次切换的随机数都不一致。

    第一次切换:

     

     第二次切换:

     上面的效果图可以看出来,虽然每次传的参数都不一样,但是登录组件一直是都是保存第一次传过来的值。这是时候如果要同步注册组件传过来的参数。就需要用到activated这个生命周期。

    代码:

    <template>
        <div>
            <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
                <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                    <span>登录</span>
                </div>
                <el-input
                        prefix-icon="el-icon-user-solid"
                        style="width: 80%;margin-top: 20px"
                        type="text"
                        placeholder="请输入用户名"
                        v-model="userName"
                        show-word-limit
                >
                </el-input>
                <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
                <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
                <div style="margin-top: 20px">
                    <button @click="toRegist">注册</button>
                </div>
    
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name:'Login',
            data(){
                return {
                    userName:'',
                    pwd:'',
                }
            },
            methods:{
                toRegist(){
                    this.$router.go(-1)
                },
                login(){
                    // localStorage.setItem('token','fdfjkdfjksdfdkf');
                    this.$router.push('/index')
                }
            },
            created(){
                this.userName = this.$route.query.id
            },
            beforeDestroy(){
                console.log('我马上被销毁了');
            },
            // 当缓存组件被激活的时候执行
            activated(){
                this.userName = this.$route.query.id
            },
        }
    </script>
    
    <style scoped>
    
    </style>

    以上就是缓存路由组件的基本使用。

    展开全文
  • 今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue缓存

    千次阅读 2019-02-14 10:52:34
    1、keep-alive要配合router-view使用,这里要注意一点就是,keep-alive本身是vue2.0的功能,并不是vue-router的,所以再vue1.0版本是不支持的。keep-alive官方文档点这里,代码实现如下,router-view是在入口APP.vue...
  • VUE缓存页面解决办法

    千次阅读 2019-03-22 15:03:13
    第一步,在router的index.js中meta增加...第二步,index.vue写法如下 <!-- <transition name="fade-transform" mode="out-in"> --> <keep-alive> <router-view v-if="$route.meta.keepAlive...
  • 本篇文章主要介绍了vue之页面缓存问题(基于2.0),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 缓存部分组件!

    千次阅读 2020-01-08 11:01:22
    1.缓存部分组件 <keep-alive :include="['addpatient']"> <router-view /> </keep-alive> 有些场景需要回到某个页面不刷新,保持里面的内容,这时候就需要缓存页面,但是不能全部缓存的情况下,...
  • Vue缓存路由(keep-alive) include不生效
  • 主要介绍了Vue动态路由缓存不相互影响的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue中,在本地缓存中读写数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue缓存机制 keep-alive

    千次阅读 2018-08-02 11:38:48
    到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对...
  • vue缓存过期问题

    千次阅读 2018-11-29 10:03:02
    //存入缓存 setLocalstorage: function (name, item) { localStorage.setItem(name, “{“time”:” + (new Date().getTime()) + “,“item”:” + JSON.stringify(item) + “}”); }, //调用缓存 getLocalstorage: ...
  • 从列表页面进入详情页,返回列表页,列表页的数据不刷新,存在缓存中 设置路由 routes:[ { path: '/list', name:'list', component: list, meta: { keepAlive: true, // 是否缓存标志 title:'列表页' } },...
  • 发现vue的标签,与标签搭配使用,可以达到目的。 //在.vue文件中,使用<keep-alive>标签包裹<router-view>标签 <keep-alive> <router-view></router-view> </keep-alive> //...
  • 问题产生的背景 我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个...这个项目是基于一个开源 vue 后台框架:https://github.com/PanJiaChen/vue-element-ad
  • 今天小编就为大家分享一篇vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页...
  • *思路是从C进入B,缓存B,其他页面进入B,不缓存 B页面: beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题...
  • vue 缓存数据的一种方法 sessionStorage

    千次阅读 2018-08-02 23:09:49
    var vm = new Vue({ el: '#example' , created () { this.getNum() }, methods:{ getNum (){ let a = sessionStorage.getItem( 'objStr' ) console.log(a); // nihao,zaima } } }) 复制...
  • keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染。 用法: 运行结果描述: input输入框内,路由切换输入框内部的内容不会发生改变。 在keep-alive标签内部添加 include:字符...
  • vue 缓存与获取缓存

    千次阅读 2019-11-21 10:33:30
    1.创建storage.js // 封装localStorsge本地储存方法 var storage = { set(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, get(key) { return JSON.parse(localStorage.getIte...
  • keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 用法也很简单: <!-- 该组件将被缓存! --> props include – 字符串或正则表达,只有匹配的组件会被缓存 exclude ...
  • vue组件缓存

    2021-10-26 16:26:16
    为了解决这个问题,你还需要使用 vue 内置组件 <keep-alive>。 <!-- 组件内部--> <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件,比如 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,156
精华内容 32,062
关键字:

vue缓存