建议:
大多数情况下,我们需要的是数据的刷新;
如果你的刷新仅仅是请求的数据或者是通过函数得到的数据在页面的更新
,比如删除地址后刷新地址列表/体现后刷新金额;那么建议你将请求数据/事件函数
封装成事件,在页面加载时调用获取数据,再在进行操作后调用获取新的数据,这样也能达到页面刷新的效果,而且不会有页面闪烁;
下面的这些方法大多是带动浏览器刷新,可能会造成页面的闪烁:
JavaScript / jQuery
location.reload();//使用百reload()
history.go(0)//使用历史记录度,不准确
location=location;//重置知
location.assign(location); //重置
document.execCommand('Refresh');//使用函数
window.navigate(location); //使用navigate重定位页面
location.replace(location); //使用替换函数将内容替换为道原地址回
document.URL=location.href;//重置
vue
1.原始方法:
location.reload();
2.vue自带的路由跳转:
this.$router.go(0);
上面的这两种都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好
3.仅刷新数据
首先在APP.vue中
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () { //父组件中通过provide来提供变量,在子组件中通过inject来注入变量。
return {
reload: this.reload
}
},
data() {
return{
isRouterAlive: true //控制视图是否显示的变量
}
},
methods: {
reload () {
this.isRouterAlive = false; //先关闭,
this.$nextTick(function () {
this.isRouterAlive = true; //再打开
})
}
},
}
</script>
然后在需要刷新的组件(页面)中注册方法
export default {
inject:['reload'], //注入App里的reload方法
data () {
return {
.......
}
},
最后在需要刷新页面的代码块中使用:
this.reload();
微信小程序和uni-app有下拉刷新,参照官方文档即可
所写博客皆为自己的心得,如有错误欢迎指出,侵删,谢谢