vue使用缓存产生的问题如何解决?

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


凤凰求蛊
浏览 1260回答 2
2回答

九州编程

将列表页设置keepAlive:true默认需要缓存beforeRouteEnter钩子中判断from然后决定是否需要重新调用获取数据接口伪代码如下new&nbsp;Vue({&nbsp;&nbsp;&nbsp;&nbsp;methods:{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//获取列表数据 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getData(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//数据请求部分省略 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.data&nbsp;=&nbsp;res.data; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;beforeRouteEnter(to,&nbsp;from,&nbsp;next){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//如果不是从详情页进入此组件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(from.path&nbsp;!==&nbsp;'详情页path'){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//组件实例初始化后 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next(vm&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//重新获取数据 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vm.getData() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//else的情况不用判断.&nbsp;因为之前路由中设置了`keepAlive:true`&nbsp;默认会缓存 &nbsp;&nbsp;&nbsp;&nbsp;} })题主可以试试这个思路&nbsp;拙见,不足之处望指出
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Vue.js