目前在做一个后台管理系统,项目要求在页面右上角加上一个刷新图标按钮,点击按钮时刷新页面。
对于页面刷新个人知道这几种方式
1.利用vue的路由跳转:
this.$router.go(0)
这种方式的刷新方式利用了路由特性,优点很明显,方便。一行代码即可搞定,但是呢,缺点也很致命:页面会一瞬间的白屏,体验不是很好。在当前的项目需求中不适合
2.location对象的reload方法:
location.reload().
此方法作用类浏览器的刷新按钮,刷新时页面会瞬间白屏闪烁,体验不好。
具体关于loction.reload()方法可以看:菜鸟教程
3.同样利用路由跳转实现:
方法如下:
首先新建空白页面:excessive.vue ,在路由中注册path:"/excessive",
在该页面的beforeRouteEnter 路由钩子中定义跳转信息
beforeRouteEnter (to, from, next) {
next(()=> {
this.$router.replace(from.path)
})
}。
之后再需要刷新的方法里:this.$router.push(’/excessive’)
他的原理是当需要刷新页面时先跳转到其它(空)页面,之后再跳转回来。此时页面不会闪烁,但是可以实现刷新,看起来很完美,但是在页面来回跳转的时候虽然页面没有闪烁,但是路由地址却在急速变化。这种方式可以酌情使用,看需求吧
4.通过控制入口文件的router-view进行刷新
<router-view v-if="isShow" />
在data中设置isShow
isShow: true
在methods中定义reload方法:
reload() {
this.isShow= false;
this.$nextTick(() => {
this.isShow= true;
});
}
通过provide导出
provide() {
return {
reload: this.reload,
};
}
之后在你需要刷新的页面引入:
inject: ['reload']
在你需要刷新的地方调用reload方法:
this.reload()
这种方式实现刷新页面时不会造成页面闪烁也不会有路由变化,我在项目中用的就是这种方式。
ps:在开发中可能会有类似的需求,但是不是像我这样的点击刷新,而是数据变化刷新页面。此时可以通过数据监听实现;跨页面数据变化可以通过eventBus实现,具体可以查看相关文档。
以上结论如有错误欢迎指正,谢谢