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，思路是進入該列表頁并從詳情頁返回加載緩存，其他不加載緩存。但是實際中所有頁面進入該頁面中都產生了緩存；這不是我想要的，請問上述問題應該如何解決？如何從其他頁面進入該頁面不加載緩存并從詳情返回加載緩存？
2 回答
九州編程
TA貢獻1785條經驗 獲得超4個贊
將列表頁設置keepAlive:true
默認需要緩存
beforeRouteEnter鉤子中判斷from然后決定是否需要重新調用獲取數據接口
偽代碼如下
new Vue({ methods:{ //獲取列表數據
getData(){ //數據請求部分省略
this.data = res.data;
}
},
beforeRouteEnter(to, from, next){ //如果不是從詳情頁進入此組件
if(from.path !== '詳情頁path'){ //組件實例初始化后
next(vm => { //重新獲取數據
vm.getData()
});
} //else的情況不用判斷. 因為之前路由中設置了`keepAlive:true` 默認會緩存
}
})題主可以試試這個思路
拙見,不足之處望指出
添加回答
舉報
0/150
提交
取消