解决页面使用keepAlive缓存功能,跳转页面后再返回实现刷新

解决页面使用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) {
  // 导航离开该组件的对应路由时调用
}

猜你喜欢

转载自blog.csdn.net/m0_50298323/article/details/128393842