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>
目录
相关文章
|
弹性计算 资源调度 Kubernetes
Flink三种集群模式,Standalone模式,Flink On YARN,Flink On K8S,这三种模式有啥优缺点,生产环境如何选择呢?
Flink三种集群模式,Standalone模式,Flink On YARN,Flink On K8S,这三种模式有啥优缺点,生产环境如何选择呢?
1938 3
|
Kubernetes Ubuntu 安全
Linux|科普扫盲帖|配置网络软件源---阿里云镜像仓库服务使用(centos,Ubuntu)
Linux|科普扫盲帖|配置网络软件源---阿里云镜像仓库服务使用(centos,Ubuntu)
4169 0
|
3月前
|
数据建模 应用服务中间件 PHP
配置nginx容器和php容器协同工作成功,使用ip加端口的方式进行通信
本示例演示如何通过Docker挂载同一宿主目录至Nginx与PHP容器,实现PHP项目运行环境配置。需注意PHP容器中监听地址修改为0.0.0.0:9000,并调整Nginx配置中fastcgi_pass指向正确的IP与端口。同时确保Nginx容器中/var/www/html权限正确,以避免访问问题。
配置nginx容器和php容器协同工作成功,使用ip加端口的方式进行通信
|
运维 监控 负载均衡
探索微服务架构下的服务治理:动态服务管理平台深度解析
探索微服务架构下的服务治理:动态服务管理平台深度解析
|
8月前
|
人工智能 运维 API
云栖大会 | Terraform从入门到实践:快速构建你的第一张业务网络
云栖大会 | Terraform从入门到实践:快速构建你的第一张业务网络
379 1
|
11月前
|
人工智能 分布式计算 大数据
MaxFrame 产品评测
MaxFrame 是一款连接大数据和 AI 的 Python 分布式计算框架。本文介绍了其在实际使用中的表现,包括便捷的安装配置、强大的分布式 Pandas 处理能力和高效的大语言模型数据处理。文章还对比了 MaxFrame 与 Apache Spark 和 Dask 的优劣,并提出了未来发展的建议,旨在为读者提供全面的评测参考。
260 22
|
运维 安全 Linux
全面提升系统安全:禁用不必要服务、更新安全补丁、配置防火墙规则的实战指南
全面提升系统安全:禁用不必要服务、更新安全补丁、配置防火墙规则的实战指南
587 12
|
网络协议 Java 程序员
【网络】局域网LAN、广域网WAN、TCP/IP协议、封装和分用
【网络】局域网LAN、广域网WAN、TCP/IP协议、封装和分用
608 2
|
Linux 数据库
在Linux中,什么是冷备份和热备份?
在Linux中,什么是冷备份和热备份?