前端vue中切换路由利用watch自动刷新页面数据、及离开或切换浏览器后回到页面自动刷新功能实现
我们在项目中经常遇到，切换了路由回到原页面，数据没刷新，导致页面展示的数据不是最新数据的问题，可以用以下代码解决：
场景1：切换路由自动刷新页面
只要在vue的script中写入观察模块，watch到$route的目标页，再执行刷新数据操作
watch: {
'$route' (to) {
// to为路由跳转的实体，targe_page为当前页的name
if(to.name == 'targe_page') {
// 获取分类
this.getCategoryList();
// 加载数据
this.loadTableData();
}
},
}场景2：离开或切换浏览器后回到页面自动刷新
在vue的mounted中添加document的监听事件，可见时执行刷新数据操作
mounted () {
// 获取分类
this.getCategoryList();
// 加载数据
this.loadTableData();
// 显示隐藏时刷新
var self = this;
document.addEventListener('visibilitychange', function () {
// 页面变为不可见时触发
if (document.visibilityState == 'hidden') {
// document.title = '离开';
}
// 页面变为可见时触发
if (document.visibilityState == 'visible') {
// 获取分类
self.getCategoryList();
// 加载数据
self.loadTableData();
}
});
}本文为胖虎原创文章,转载无需和我联系,但请注明来自胖虎博客panghucat.cn
