Vue中刷新当前页面

简介: Vue中刷新当前页面

刷新页面

方法一

window.reload();

方法二

this.$router.go(0);

以上两种方式会出现白屏

方法三

不会有闪烁的空白出现

App.vue

<template>

<div id="app">
<!-- 增加判断,让其隐藏 -->
<router-view v-if="isRouterAlive"/>
</div>
</template>

<script>
export default {
name: 'App',

// 暴露reload,方便后面组件调用
provide(){
return {
reload: this.reload
}
},

data(){
return {
isRouterAlive: true
}
},

methods:{
// 重新加载方法
reload(){
this.isRouterAlive = false;
this.$nextTick(()=>{
this.isRouterAlive = true;
})
}
}
}
</script>

子组件调用刷新方法

<script>
export default {

// 获取APP.vue里的reload方法
inject: ["reload"],

methods: {
reloadPage() {
// 刷新页面
this.reload();
}
}
}
</script>

参考

vue项目如何刷新当前页面

            </div>
目录
相关文章
|
机器学习/深度学习 算法 TensorFlow
|
XML Java Android开发
Android Studio App开发之使用相机拍摄照片和从相册中选取图片(附源码 超详细必看)
Android Studio App开发之使用相机拍摄照片和从相册中选取图片(附源码 超详细必看)
1794 1
|
4月前
|
存储 安全 BI
硬盘有坏道怎么办?硬盘坏道如何屏蔽?
本文简单介绍一下坏道的类型,然后介绍检测工具、坏道屏蔽方法,感兴趣的用户可以尝试。
|
10月前
|
缓存 负载均衡 安全
什么是CDN服务
CDN(内容分发网络)是全球分布的服务器网络,旨在加速互联网内容的传输。它通过将内容缓存至靠近用户的服务器,减少延迟,提升访问速度与性能,同时实现负载均衡、减轻源服务器压力并提供安全防护。广泛应用于网站加速、视频直播等领域,优化用户体验。
9691 5
|
前端开发 JavaScript
如何让input框在用户输入后,文字居中显示
如何让input框在用户输入后,文字居中显示
633 0
|
前端开发 JavaScript
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
800 1
|
机器学习/深度学习 监控 算法
量化交易系统开发步骤功能/规则玩法/案例项目/逻辑功能
量化交易策略系统开发是指利用编程和数学模型来设计、开发和实施自动化交易策略的过程。它涉及了将交易策略转化为可编程的算法,以便计算机可以根据预定规则和条件进行自动交易。
|
前端开发 PHP 对象存储
如何用Postman测试文件或图片上传
本文介绍了在某些小项目中,如何使用传统方式将文件上传到与应用程序同一服务器上的方法,而不是使用大平台的对象存储。
1905 3
|
移动开发 小程序 API
uniapp组件库Popup 弹出层 的使用方法
uniapp组件库Popup 弹出层 的使用方法
1096 1
|
移动开发 JavaScript 小程序
uView LineProgress 线形进度条
uView LineProgress 线形进度条
273 0