解决页面使用keepAlive缓存功能,跳转页面后再返回实现刷新
需求分析:A页面使用了keepAlive: true缓存功能,且A页面中使用了router.push进行路径跳转,在A页面跳转到B页面后再次返回到A页面时需刷新页面
踩坑:
- 在A页面中router.push实现跳转到B后调用页面刷新函数,无效
- 将A页面中的keepAlive改成false无效
- 将A页面中的keepAlive删除有效,造成的后果是tab栏不见了(不符合需求)
实现思路:观察页面路径是否有变化,若有变化则触发页面刷新函数
具体实现方法:监听路由变化
方法一:使用watch监听路由的变化
watch:{
$route(to,from){
// 输出当前所在页面的路径
console.log(to.path);
// 若路径为你需要刷新的页面路径
if(to.path === '你需要刷新的页面路径'){
console.log('页面进行刷新了');
// 则调用刷新页面的函数进行刷新
this.reload();
}
}
};
方法二:使用vue-router中的钩子函数监听路由变化
// 监听,当路由发生变化时执行 需知道以下这些函数什么时候被调用
beforeRouteEnter (to, from, next) {
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但在该组件被复用时会调用
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
}