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