账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue使用缓存产生的问题如何解决?
    • 2020-01-01 00:00
    • 10
    30
    0

    vue中,一个列表页从列表详情页返回需要被缓存,从其他页面进入列表不需要缓存,我在main.js中设置

    router.beforeEach((to, from, next) => {
        Vue.prototype.fromurl = from.path;
        Vue.prototype.tourl = to.meta;
        if(from.path.substr(3,4)=='shop'){
                var bostonetop = $(window).scrollTop();
                localStorage.setItem("bostonetop",bostonetop) 
         }
        else if(from.path.substr(3,13)=='special_field'){
                var bostonetop = $(window).scrollTop();
                localStorage.setItem("bostonetop",bostonetop) 
         }
        if (to.path.substr(3,4) =='shop') {
            if(from.path.substr(3,14)=='product_detail'){
              // 思路是进入列表页并从详情页返回加载缓存,其他不加载缓存
                to.meta.keepAlive = true;
                var bostonetop = localStorage.getItem("bostonetop") 
                $('html,body').animate({scrollTop:bostonetop}, 10);
            }
         } 
        else if (to.path.substr(3,13)=='special_field') {
            if(from.path.substr(3,14)=='product_detail'){
                to.meta.keepAlive = true;
                var bostonetop = localStorage.getItem("bostonetop") 
                $('html,body').animate({scrollTop:bostonetop}, 10);
            }
        }else{
             to.meta.keepAlive = false
         }
         next()
    })

    App.vue

    <template>
      <div id="app">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>

    router.js

     {
       path: '/t/shop',
       name: 'shop',
       component: shop,      
       meta: {
               keepAlive: true 
               }
      },

    RT,思路是进入该列表页并从详情页返回加载缓存,其他不加载缓存。但是实际中所有页面进入该页面中都产生了缓存;这不是我想要的,请问上述问题应该如何解决?如何从其他页面进入该页面不加载缓存并从详情返回加载缓存?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 满身烟酒味、 普通会员 1楼

      Vue使用缓存可能会产生以下问题:

      1. 访问频率过高的页面会出现卡顿、延迟等现象,这主要是由于缓存数据造成的。
      2. 缓存的数据可能会因为长时间未更新而过时,从而导致用户重新加载页面时出现问题。
      3. 如果缓存数据过多,可能会导致浏览器的内存溢出,影响浏览器的性能。

      为了解决这些问题,可以采取以下几种方法:

      1. 使用基于JSON或者Hash的缓存:这些数据是按时间戳排序的,每次页面被访问时,都会从缓存中读取数据,如果数据已过期,就从数据库中读取,然后再写入缓存。
      2. 使用Redis或者其他NoSQL数据库:这些数据库有自动重试机制,如果缓存数据未更新,就会从数据库中读取数据。
      3. 使用CDN:CDN可以将静态资源分发到全球的服务器上,用户可以从最近的服务器获取资源,从而减少网络延迟和网络带宽的使用。
      4. 使用懒加载:懒加载是一种延迟加载技术,可以减少初始加载的数据量,从而提高页面的加载速度。

      总的来说,Vue使用缓存是一个常见的技术,但是需要根据具体的业务需求和环境选择合适的缓存策略。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部