页面刷新没有执行watch，怎么办？

在实际开发中，页面之间跳转后，会伴随着后端接口的调用，从而获取接口数据，更新跳转后的页面

前言

一般的，我们会把后端接口的调用时机，放在created()钩子里，但是针对跳转到另一个页面后，接口的调用时机还会在created()里面吗？

企业项目开发场景

• 要求：从A页面，跳转到B页面后，需要立即调用B页面的接口，更新页面数据

需求实现一、

将请求放在created()里面，

created() {
    
  // API请求
}

注意：此时跳转后的页面不会自动调用接口，需要手动刷新浏览器才能调用接口

需求实现二、

监听路由跳转变化，根据路由变化，调用接口

watch:{
    
  $route(to,from){
    
     // 路由变化了，
     // 调用接口
   }
},

注意：此时跳转后的页面会立即调用接口，更新新页面数据，但是，用户刷新页面后，路由监听是不执行的，所有不再调用接口，页面数据丢失

需求实现三

1、监听路由跳转变化，根据路由变化，调用接口
2、同时，在created()调用后端接口

watch:{
    
  $route(to,from){
    
     // 路由变化了，
     // 调用接口
   }
},
// 避免用户刷新 造成数据丢失
created() {
    
  // API请求
}

注意：此时跳转后的页面会立即调用接口，更新了新页面数据，同时用户刷新页面，也会调用接口，但是，路由变化的同时也是页面初次渲染，所以created和watch都会执行，造成接口重复调用

需求实现四

1、监听路由跳转变化，根据路由变化，调用接口
2、同时，在mounted()调用后端接口，此时页面已经渲染完成

watch:{
    
  $route(to,from){
    
     // 路由变化了，
     // 调用接口
   }
},
mounted() {
    
  // API请求
}

此时，路径变化，立即调用一次接口，且用户刷新也会调用接口。缺点是：代码冗余，不好维护，可读性差

需求实现四

使用深度监听路由，immediate:true（页面初始化/刷新 立即执行）

watch:{
    
  $route : {
    
     handler(to,from) {
    
         let programName = to.params.programName;
         if(!programName) {
    
           return
         }else {
    
           this.getArticleListApi(programName,{
    
             programId : to.params.programId
           })
         }
     },
     immediate:true, // 页面初始化/刷新 立即执行
   }
 },

总结：路由造成数据丢失的有多种，最常见的就是浏览器刷新，数据丢失，如果是Vuex造成的，可以借助浏览器本地存储，不过个人推荐使用vuex-persistedstate插件，如果是其他造成的数据丢失，就需要定位到组件，具体问题具体分析了。核心就是：组件钩子函数和watch是否成功执行、是否阻塞执行

完美解决Vuex数据丢失，请参考