页面刷新没有执行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是否成功执行、是否阻塞执行