vue刷新当前页面方法(转载)
页面刷新方法
解决方案以及出现的问题
-
1.this.$router.go(0). 通过路由跳转的方式重新渲染页面, 虽然代码量很少,便于书写和理解,但是体验很差,在刷新的一瞬间会出现白屏的现象.
-
2.location.reload(). 该方法只有一个参数,当值为 true 时,将强制浏览器从服务器加载页面资源,当值为 false 或者未传参时,浏览器则可能从缓存中读取页面。 缺点:该方法在跨域调用(执行该方法的脚本文件的域和 Location 对象所在页面的跨不同)时,将会抛出 DOMException 异常。并且也同样会出现页面在刷新的时候会出现白屏的现象
-
3.provide / inject组合
原理: 以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
提示: provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
所以接下来我们将介绍第三种方法 provide / inject组合
provide / inject组合
在APP.vue中,声明reload方法,控制router-view模块的显示或者隐藏,从而控制页面的再次加载.
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
在需要刷新的页面,直接注入inject的reload依赖,在逻辑操作完成后需要刷新的位置,使用this.reload()调用,即可刷新当前页面.
export default {
name: "ItemPage",
components: {},
inject: ["reload"], //注入reload方法
data() {
return {
};
},
methods: {
//页面逻辑操作方法
handleClick() {
//此处操作页面功能
//.......
this.reload(); //此处刷新页面
}
},
mounted() {
}
};
最后
十分感谢原博主,原博客的地址为:
【推荐】FlashTable:表单开发界的极速跑车,让你的开发效率一路狂飙
【推荐】Flutter适配HarmonyOS 5知识地图,实战解析+高频避坑指南
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 于是转身独立开发者
· C#.Net筑基-泛型T & 协变逆变
· dotnet 代码调试方法
· DbContext是如何识别出实体集合的
· 一次 .NET 性能优化之旅:将 GC 压力降低 99%
· 免费开源 .NET OpenCV 迷你运行时全平台发布
· 10亿订单如何分库分表?
· 一个static关键字引发的线上故障:深度剖析静态变量与配置热更新的陷阱
· C# 的深度强化学习框架RL_Matrix
· 如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航