跳转页面实时调用后台接口，更新页面数据

背景：前端页面跳转，由于created和mounted钩子只在组件初次渲染加载一次，所以在页面跳转的时候，不能实时请求后端API接口，刷新页面数据

可能踩的bug

也许你可以根据监听路由变化，每当页面跳转，就可以监听到路由变化，从而请求接口。不过这样会有以下两种缺陷：

1. 路由检测handler()，被触发两次或者两次以上，原因是：1、keep-alive会将Vue实例始终保持在内存中，因此该Vue实例始终存续，相应的watchers始终生效；2、原理是监听模式 下的新旧数据改变 他是2个条件语句 所以会执行2次
2. 用户刷新页面，不会触发路由监听，从而不能调用接口

最终解决

核心：activated钩子 和 deactivated

activated () {
    
  this.activatedFlag = true;
  if (this.$route.fullPath === "/studyProduct" && this.activatedFlag) {
    
    this.listPageApi(this.listParams);
  }
},
deactivated () {
    
  this.activatedFlag = false;
  // 清空保存listPageApi接口返回数据的容器
  this.saveProductData = [];
},

优点：

1. 跳转页面会进入到activated ，跳出当前页面会改变标记activatedFlag
2. 用户手动刷新浏览器，也会进入到activated

注意：
此时，watch和created或者mounted里，不要出现activated钩子调用的listPageApi方法