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>
目录
相关文章
|
4月前
|
SQL 数据可视化 JavaScript
嵌套式事项整合工具深度解析:任务、子任务、执行流的统一调度机制
在项目执行中,任务虽已完成,但常因缺乏结构化管理导致进度混乱、协作低效。嵌套式事项整合工具通过多级拆分、状态聚合与逻辑联结,帮助团队构建清晰的任务结构,提升执行效率与协同能力。
嵌套式事项整合工具深度解析:任务、子任务、执行流的统一调度机制
|
机器学习/深度学习 算法 搜索推荐
外卖平台推荐算法的优化与实践
外卖平台推荐算法的优化与实践
|
11月前
|
JSON 搜索推荐 API
京东店铺所有商品接口系列(京东 API)
本文介绍如何使用Python调用京东API获取店铺商品信息。前期需搭建Python环境,安装`requests`库并熟悉`json`库的使用。接口采用POST请求,参数包括`app_key`、`method`、`timestamp`、`v`、`sign`和业务参数`360buy_param_json`。通过示例代码展示如何生成签名并发送请求。应用场景涵盖店铺管理、竞品分析、数据统计及商品推荐系统,帮助商家优化运营和提升竞争力。
414 23
|
存储 关系型数据库 数据库
数据备份和恢复的常见技术
【10月更文挑战第28天】数据备份和恢复的常见技术
|
运维 虚拟化 Windows
VMware Workstation常见的故障处理
关于VMware Workstation常见故障处理的指南,包括Windows 10开启虚拟机蓝屏问题的解决方案和虚拟机无法开机时的解决方法。
736 21
VMware Workstation常见的故障处理
|
人工智能 文字识别 运维
AI多模态的5大核心关键技术,让高端制造实现智能化管理
结合大模型应用场景,通过AI技术解析高端制造业的复杂设备与文档数据,自动化地将大型零件、机械图纸、操作手册等文档结构化。核心技术包括版面识别、表格抽取、要素抽取和文档抽取,实现信息的系统化管理和高效查询,大幅提升设备维护和生产管理的效率。
472 7
|
存储 编解码 监控
RGB 和 YUV 区别
【10月更文挑战第26天】RGB和YUV在色彩表示原理、数据存储方式、应用场景以及转换关系等方面都存在着明显的区别,它们各自在不同的领域发挥着重要的作用。
|
数据库连接 C++
什么是RAII原则
【10月更文挑战第19天】什么是RAII原则
472 1
|
弹性计算 Serverless 数据库
阿里云中小企业扶持权益!
阿里云为中小企业提供全面扶持,涵盖云资源、技术服务、建站营销、算力补贴及出海支持等,助力企业数字化转型与国际化发展。
422 15
|
缓存 监控 网络协议
利用DNS服务器配置错误
【8月更文挑战第17天】
391 2