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>
目录
相关文章
|
10月前
|
人工智能 安全 小程序
搬运5款体积小但非常实用的小工具
本文推荐了几款小巧且功能全面的软件,包括文件同步工具SyncToy、局域网文件传输软件Feem、在线AI工具箱3171.cn、安全文件共享工具OnionShare以及三维建模软件Blender,旨在满足用户在不同场景下的需求,提升效率的同时减少系统负担。
221 0
|
监控 安全 网络安全
|
缓存 安全 数据安全/隐私保护
带你六分钟了解CleanMyMac X详细功能讲解
电脑明明有100G,但是只剩下几个G,明明已经清理了很多,但是还是没有释放出内存,怎么办?可以试试CleanMyMac X,怎么使用呢?来看看吧!CleanMyMac X是一款颇受欢迎的专业清理软件,拥有十多项强大的功能,CleanMyMac X2023下载如下:http://t.csdn.cn/sa393
501 3
|
存储 机器学习/深度学习 人工智能
数据结构第4章课后习题答案
数据结构第4章课后习题答案
334 0
|
JavaScript 前端开发
【ChatGPT】一文教你怎么编写清晰有效的(Prompt)提示词~(二)
【ChatGPT】一文教你怎么编写清晰有效的(Prompt)提示词~(二)
|
云安全 存储 Cloud Native
阿里云ACE改革后难度变大了,还有人考吗?划不划算?
阿里云人才认证一直是IT行业内的热门证书,其中最高等级的就是ACE,在今年四月份之前,很多人都会选择考取ACE认证来丰富自己的履历,但是四月份阿里云官方对考试做出了一次整改,考试的难度和费用大幅度增加。
1271 1
阿里云ACE改革后难度变大了,还有人考吗?划不划算?
|
机器学习/深度学习 数据挖掘 数据处理
NumPy数据分析基础:ndarray属性查看、创建及输出各类操作详解
NumPy数据分析基础:ndarray属性查看、创建及输出各类操作详解
1357 0
NumPy数据分析基础:ndarray属性查看、创建及输出各类操作详解
|
机器学习/深度学习 算法 大数据
阿里云助力Today便利店点亮温暖城市的梦想!
 摘要:24小时的便利店,如何才能开在最需要的地方,让“便利”真正触手可及?本文将带领大家了解阿里云智能选址解决方案是如何通过大数据和智能算法赋能,让机器“选址专家”为Today便利店点亮温暖城市的梦想。
5324 0
|
计算机视觉
轮廓的查找、表达、绘制、特性及匹配(How to Use Contour? Find, Component, Construct, Features & Match)
http://www.cnblogs.com/xrwang/archive/2010/02/09/HowToUseContour.html   作者:王先荣 前言    轮廓是构成任何一个形状的边界或外形线。
2119 0