vue keep-alive请求数据的方法示例
背景
index页面：首页品牌入口
list页面：商品列表页面
product页面：商品详情页面
从index页面进入list的时候要刷新页面，从product页面返回list的时候不需要刷新页面，所以list使用了keep-alive的属性,keepAlive设置为true，但是开发过程中发现一个问题，从product返回到list的时候，列表页面不是正确的品牌列表，而是之前一次点击的品牌列表。由于每个人遇到关于keep-alive请求数据不正确的问题不同，这里就直接说我的解决办法。希望能给大家一个思路。
解决办法
很多人都会通过修改keepAlive来改变keep-alive，我尝试后还是不行，就换了个思路
钩子函数的执行顺序
不使用keep-alive
beforeRouteEnter-->created-->mounted-->destroyed
使用keep-alive
beforeRouteEnter-->created-->mounted-->activated-->deactivated
先扫盲，多少人和我都不知道上面的知识，在keep-alive的页面中，可以在activated获取this.$route.params的参数
避开了设置keepAlive导致product返回的时候数据不对，当页面进入list的时候都是缓存状态，然后再通过是不是由index进入来判断是否执行activated里的函数，
list.vue
beforeRouteEnter(to,from,next){
//判断从index页面进入，将list的isBack设置为true
//这样就可以请求数据了
if(from.name=='index'){
to.meta.isBack=true;
}
next();
},
activated:function(){
if(this.$route.meta.isBack||this.isFirstEnter){
//清理已有商品列表的数据，重新请求数据，如果不清除的话就会有之前的商品缓存，延迟显示最新的商品
this.proData=[];
//请求数据
this.fetchData();
}
//重新设置当前路由的isBack
this.$route.meta.isBack=false;
//重新设置是否第一次进入
this.isFirstEnter=false;
},
mounted:function(){
//如果是第一次进入，或者刷新操作的话，也请求数据
this.isFirstEnter=true;
},
router.js
constappRouter={
mode:"history",
base:"/m/",
routes:[
{
path:"",
redirect:"/index"
},
{
path:"/index",
name:"index",
component:Index,
meta:{
keepAlive:true
}
},
{
path:"/list",
name:"list",
component:List,
meta:{
keepAlive:true,
isBack:false//isback是true的时候请求数据，或者第一次进入的时候请求数据
}
},
{
path:"/product/:id",
name:"product",
component:Product,
meta:{
keepAlive:false
}
}
]
};
Vue.use(Router);
exportdefaultnewRouter(appRouter);
不知道有咩有帮大家理清思路，有问题可以留言，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。